django中有关ajax的部分

2023年4月2日下午5:02 • Python开发

Django_ajax

1 简介

AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）。

同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。

2 特点

AJAX除了异步的特点外，还有一个就是：浏览器页面局部刷新；（这一特点给用户的感受是在不知不觉中完成请求和响应过程）

3 能向后端发送请求的方式

序号	类型	请求方式
1	浏览器地址栏直接输入url	get请求
2	a标签的href属性	get请求
3	form表单action属性	get请求和post请求
4	ajax	get请求和post请求

4 ajax的使用

ps：作为后端人员，前期只需要学习jquery封装之后的版本就行（不需要学习原生的ajax，原生的复杂且项目中一般不用），所以在前端

页面使用ajax的时候需要先导入jquery！

4.1 jquery中ajax的使用方法

jquery调用ajax的方法：
    格式：$.ajax({});
        参数：
            type：请求的方式get、post（小写）
            url："" 请求的地址，不写默认为当前地址
            async：是否异步，默认为true表示异步
            data：发送到服务器的数据
            dataType：'json'预期服务器返回的数据类型为json格式
            contentType：设置请求头
            success：function(date){}; data是形参名，请求成功时调用此函数
            error：请求失败时调用此函数

小案例：
需求：页面上有三个input框，在前两个框中输入数字点击按钮朝后端发送ajax请求，后端计算出结果再返回给前端动态展示的到第三个input框中(整个过程页面不准有刷新,也不能在前端计算)

html部分


<body>
<input type="text" id="d1">+
<input type="text" id="d2">=
<input type="text" id="d3"><br>
<button id="btn">提交</button>
</body>
<script>
    $('#btn').click(function (){  # 点击btn按钮时触发click事件，执行ajax
        $.ajax({
            type:'post', # 指定请求方式
            url:'', # 不写默认向当前地址提交
            data:{'u1':$('#d1').val(),'u2':$('#d2').val()},  #获取需要向服务器提交的值，使用jquery动态获取用户提交的值
            success:function (args){  # ajax的url请求成功时执行的函数，args指的是服务端传到客户端的数据，如果是服务端返回的是字典，则需要进行反序列化
                $('#d3').val(args)   #将传回的数据添加到d3框中
            }
        })
    })
</script>

后端部分

def index(request):
    if request.method =='POST':
        u1 = request.POST.get('u1') #接收前端传来的数据
        u2 = request.POST.get('u2')
        u3 = int(u1)+int(u2) # 将数据进行相加
        return HttpResponse(u3)  # 把结果返回给前面，注意这个用HttpResponse返回，如果是字典，则需要进行序列化
      # return JsonResponse(dict) # 直接把字典序列化，前端也无需在反序列化了！ 
    return render(request,'index.html')  # 最后还需要返回原先的页面