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

旧城等待， 2022-10-05 09:52 205阅读 0赞

# 一、前端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 #

<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][https_blog.csdn.net_autoliuweijie_article_details_50291357]

[https_blog.csdn.net_autoliuweijie_article_details_50291357]: https://blog.csdn.net/autoliuweijie/article/details/50291357