Django与Ajax

news2024/10/5 14:24:59

一、什么是Ajax

AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步Javascript和XML”。
即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML，现在更多使用json数据）。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法
AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。(这一特点给用户的感受是在不知不觉中完成请求和响应过程)
AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。
- 同步交互：
  - 客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
- 异步交互：
  - 客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。

场景：

优点：

异步提交
局部刷新

二、Ajax的案例

<script>
    //给input框绑定一个失去焦点的事件
    $(".btn").click(function () {
        var inp1 = $("#inp1").val();
        var inp2 = $("#inp2").val();

        // 把获取到的两个值提交到后端，然后让Python来计算，然后返回
        //$.ajax为固定用法，表示启用ajax
        $.ajax({
        //url后面跟的是你这个ajax提交数据的路径，向谁提交，不写就是向当前路径提交    
            url:'', 
            //type为标定你这个ajax请求的方法
            type:'post',
            dataType:'json',
            // 回调函数用来接收后端返回的数据
            data:{inp1:inp1, inp2:inp2},
            //success为回调函数，参数data即后端给你返回的数据
            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')