Django与Ajax-CSDN博客

一、什么是Ajax

• AJAXAsynchronous Javascript And XML翻译成中文就是“异步Javascript和XML”。
• 即使用Javascript语言与服务器进行异步交互传输的数据为XML当然传输的数据不只是XML现在更多使用json数据。

• AJAX 不是新的编程语言而是一种使用现有标准的新方法

• AJAX 最大的优点是在不重新加载整个页面的情况下可以与服务器交换数据并更新部分网页内容。(这一特点给用户的感受是在不知不觉中完成请求和响应过程)
• AJAX 不需要任何浏览器插件但需要用户允许JavaScript在浏览器上执行。
  • 同步交互
    • 客户端发出一个请求后需要等待服务器响应结束后才能发出第二个请求
  • 异步交互
    • 客户端发出一个请求后无需等待服务器响应结束就可以发出第二个请求。

场景

优点

1. 异步提交
2. 局部刷新

二、Ajax的案例

<script>

    $(".btn").click(function () {
        var inp1 = $("#inp1").val();
        var inp2 = $("#inp2").val();

        // 把获取到的两个值提交到后端然后让Python来计算然后返回
        $.ajax({
            url:'', // 默认不写就是朝当前地址传递
            type:'post',
            dataType:'json',
            data:{inp1:inp1, inp2:inp2},
            // 回调函数用来接收后端返回的数据
            success:function (res) {
                // {"username": "kevin", "password": 123}
                console.log(res,)  // 就是拿后端返回的数据

                // 反序列化
                {#res=JSON.stringify()#}
                // 后端返回的数据别忘了反序列化但是你的护短别往了序列化
                {#res=JSON.parse(res)#}
                console.log(typeof res)  // 就是拿后端返回的数据
                console.log(res.username)  // 就是拿后端返回的数据
                console.log(res.password)  // 就是拿后端返回的数据
                {#$("#inp3").val(res);#}
            }
        })

    })
</script>
                
def ab_ajax(request):
    # if request.is_ajax():

    if request.method=='POST':
        '''接收ajax提交过来的数据'''
        # <QueryDict: {'inp1': ['1'], 'inp2': ['1']}>
        print(request.POST)
        # d1 = request.POST.get('inp1') # str
        # d2 = request.POST.get('inp2') # str
        # d3 = int(d1) + int(d2)
        # 序列化
        import json
        # json.dumps(d3)
        user_dict = {"username":"kevin", "password":123}
        # return HttpResponse(json.dumps(d3))
        return HttpResponse(json.dumps(user_dict))
        # return JsonResponse(user_dict)
    return render(request, 'ab_ajax.html')