美文网首页Python
不刷新页面请求数据(Django+ajax+jquery)

不刷新页面请求数据(Django+ajax+jquery)

作者: 寂寞杰罗 | 来源:发表于2018-01-16 16:45 被阅读3742次

一个简单加法的例子

网上找了些资料,大部分资料由于Django版本低,没法直接用,自己写好做个记录。
做ajax页面请求主要有 点:

urls.py

建立两个url路径,demo_ajaxdemo_add

urlpatterns = [
    …………
    path('demo_ajax/', hc_views.demo_ajax),
    path('demo_add/', hc_views.demo_add),
]

demo_ajax显示加法输入框和按钮,demo_add导航到views试图,用于处理加法并返回结果。

views.py

两个试图对应两个urls,demo_ajax视图直接渲染demo_ajax.html模板,demo_add视图处理GET请求。

def demo_ajax(request):
    return render(request, 'demo_ajax.html')

def demo_add(request):
    a=request.GET['a']
    b=request.GET['b']

    if request.is_ajax():
        ajax_string = 'ajax request: '
    else:
        ajax_string = 'not ajax request: '

    c = int(a) + int(b)
    r = HttpResponse(ajax_string + str(c))
    return r

HTML模板页面

<!DOCTYPE html>
<html>
<head>
    {% load static %}
</head>
<body>
    <p>请输入两个数字</p>
    <form action="/demo_add/" method="get">
        a: <input type="text" id="a" name="a"> <br>
        b: <input type="text" id="b" name="b"> <br>
        <p>result: <span id='result'></span></p>
        <button type="button" id='sum'>提交</button>
    </form>

    <script src="{% static 'jquery/jquery.js' %}"></script>
    <script>
//这里是关键点 .ready 函数好像监听器。
        $(document).ready(function () {
//jq的处理函数,当点击提交按钮时执行。
            $("#sum").click(function () {
//得到页面中id为a和b两个标签的值
                var a = $("#a").val();
                var b = $("#b").val();
//向服务器发送get请求,请求地址为demo_add
                $.get("/demo_add/", { 'a': a, 'b': b }, function (ret) {
//请求结果为ret,将请求结果赋值给id为result的节点
                    $('#result').html(ret)
                })
            });
        });
    </script>
</body>
</html>

结果

image.png

相关文章

  • 不刷新页面请求数据(Django+ajax+jquery)

    一个简单加法的例子 网上找了些资料,大部分资料由于Django版本低,没法直接用,自己写好做个记录。做ajax页面...

  • LayUI页面关闭和刷新问题

    一 编辑成功后刷新父页面 二 请求成功后刷新数据表格 三 关闭子页面刷新父页面数据表格 调用layer插件的en...

  • iOS 11 之后,tableview reloadData之后

    问题:正常网络请求,获取到数据list,调用tableview reloadData之后,UI页面刷新数据,但是发...

  • AJAX

    发请求的方式 ,但是会刷新页面或者新开页面 ,可以发送get请求,也会刷新页面或者新开页面 ,可以发送get请求,...

  • 在ie中请求后台接口后数据更新,但是页面没有刷新

    后台数据库数据已更新,但是前台页面一直不刷新,百度后找到答案 找到答案啦,是因为ie11下,如果GET请求请求相同...

  • ajax

    ajax 是什么?有什么作用? 异步的JavaScript && XML 作用是在页面不刷新的前提下向后端请求数据...

  • 自己实现AJAX

    如何发请求? 用form可以发请求,但是会刷新页面或新开页面;用a可以发get请求,但是也会刷新页面或新开页面;用...

  • AJAX入门

    1.历史上发送请求的方式 用form发请求会刷新页面或新开页面用a发get请求会刷新页面或新开页面用img发请求,...

  • iOS跨页面按需刷新

    背景 多页面数据关联,页面重新出现时都需要刷新,不需要刷新时也刷新,所以有很多无效请求。如果使用通知,通知是立即直...

  • AJAX

    如何发请求? 用 form 可以发请求,但是会刷新页面或新开页面用 a 可以发 get 请求,但是也会刷新页面或新...

网友评论

    本文标题:不刷新页面请求数据(Django+ajax+jquery)

    本文链接:https://www.haomeiwen.com/subject/mlzsoxtx.html