Django Ajax-基本局部刷新实现，以加法为例

最新推荐文章于 2022-12-06 16:02:12 发布

zju_cxl

最新推荐文章于 2022-12-06 16:02:12 发布

阅读量2.2k

点赞数 2

分类专栏： Django 文章标签： ajax web jquery python Django

本文链接：https://blog.csdn.net/hrbust_cxl/article/details/106750759

版权

Django 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

现在写Web，不用Ajax怎么可以呢！！

用Django肯定不能完全都让Django加载呀，而且老是跳页面对用户也不好！！

因此，我们采取Ajax来实现：

以加法为例子。

urls.py中注册路由：


    path('add/', views.add, name='add'),

视图层views.py将界面写一下：

def index(request):
    return render(request, 'tttt/index.html')


def 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

然后是界面，写在模版中：

<!DOCTYPE html>
<html>
<body>
<p>请输入两个数字</p>
<form action="/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="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
    $(document).ready(function(){
      $("#sum").click(function(){
        var a = $("#a").val();
        var b = $("#b").val();

        $.get("/t/add/",{'a':a,'b':b}, function(ret){
            $('#result').html(ret)
        })
      });
    });
</script>
</body>
</html>
{#            $.ajax({#}
{#                url: "/t/add/",#}
{#                type: "POST",#}
{#                data: "a=" + a + "&b=" + b,#}
{#                success: function (data) {#}
{#                    $('#result').html(data)#}
{#                }#}
{#            });#}

使用.ajax的话，会有个CSRF问题，以后解决！

运行起来，结果如下：

这样等于就实现了局部刷新。

zju_cxl

关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
Django Ajax-基本局部刷新实现，以加法为例

现在写Web，不用Ajax怎么可以呢！！用Django肯定不能完全都让Django加载呀，而且老是跳页面对用户也不好！！因此，我们采取Ajax来实现：以加法为例子。urls.py中注册路由： path('add/', views.add, name='add'),视图层views.py将界面写一下：def index(request): return render(request, 'tttt/index.html')def add(request):
复制链接

扫一扫