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

 

一、前端html

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

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

    a:  
    b:  
    
result: 
    ajax提交

 

 

 

二、前端js

        
    
    $(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(){
                //请求出错处理
            }     
        })
      });
    });
    

 

三、后端

由于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