Django 2021年最新版教程18jquery ajax实例 json

Posted 2021-06-27 软件工程小施同学

 

一、前端html

    将如下的表单数据a和b发送给服务器，服务器端的django接收数据并计算a+b的结果，并以json格式附在response文件上返回回来。

   前端接收到返回的结果后，在不刷新页面的情况下，将结果显示出来。

<form>
    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'>ajax提交</button>
</form>

 

 

 

二、前端js

    <!--记得引入jquery.js-->    
    <script>
    $(document).ready(function(){
      $("#sum").click(function(){
        var a = $("#a").val();
        var b = $("#b").val();

        $.ajax({
            type:"POST",
            url:"/ajax/add/",
            data:{"a":a, "b":b},
            datatype:"json",
            success: function(ret){
                $('#result').html(ret.result)
            },
            //调用出错执行的函数
            error: function(){
                //请求出错处理
            }     
        })
      });
    });
    </script>

 

三、后端

由于django中对post增加了csrf的保护，所以其views.py的响应函数需要加上@csrf_exempt装饰器，具体如下：

from django.views.decorators.csrf import csrf_exempt

@csrf_exempt
def ajax_test_add(request):
    a = int(request.POST.get('a'))
    b = int(request.POST.get('b'))
    return_json = {'result':a+b}
    return HttpResponse(json.dumps(return_json), content_type='application/json')

 

 

 

 

参考：https://blog.csdn.net/autoliuweijie/article/details/50291357