Ajax

目录

• Ajax
• Content-Type
• ajax携带文件数据
• ajax补充说明

Ajax

异步提交 局部刷新

ajax不是一门新的技术并且有很多版本 我们目前学习的是jQuery版本(版本无所谓 本质一样就可以)

基本语法

$.ajax({
    url: ''， 这个路由跟form的action 一样有三种形式
    type:''， 请求方式form 表单只有两种，而ajax有很多
	data: {'键':值}, 字典的形式向后端传参数
    success: function(args){
          
    }   回调函数 后端返回的值 会让args接收
})

实操

后端
def sum_func(request):
    if request.method == 'POST':
        v1 = request.POST.get('v1')
        v2 = request.POST.get('v2')
        print(v1, v2)
        res = int(v1) + int(v2)
        print(res)
        # return str(res)  # 必须是 HttpResponse 对象 要不然不符合 后端的语法
        from django.http import JsonResponse  # 也可以是 JsonResponse包裹的
        return JsonResponse(res, safe=False)
        # return HttpResponse(res)

    return render(request, 'sumPage.html', )

前端(记得导入 jQuery)

<input type="text" id="d1"> + <input type="text" id="d2"> = <input type="text" id="d3">

<script>
    $('#d2').on('blur',function () {
        let v1 = $('#d1').val()
        let v2 = $('#d2').val()
        $.ajax({
            url: '',
            type: 'post',
            data: {'v1': v1, 'v2': v2},
            success: function (args) {
                console.log(args)
                $('#d3').val(args)
            }
        })
    })
</script>

Content-Type

1. urlencoded

   ajax默认的编码格式、form表单默认也是数据格式 xxx=yyy&uuu=ooo

   

   django后端自动处理到request.POST中

2. fordate

   django后端针对普通的价值对还是处理到request.POST中 但是针对文本会处理到request.FILES中

3. application/json

   form表单不支持 ajax可以
   <script>
       $('#d2').on('blur',function () {
           let v1 = $('#d1').val()
           let v2 = $('#d2').val()
           let res = {'v1': v1, 'v2': v2}
           res= JSON.stringify(res)
           $.ajax({
               url: '',
               type: 'post',
               data: res,
               contentType:'application/json',  // 是json 就json格式 不能骗人家
               success: function (args) {
                   console.log(args)
                   {#$('#d3').val(args)#}
               }
           })
       })
   </script>
   

   后端

   def sum_func(request):
       if request.method == 'POST':
           res = request.body  # 因为 json格式 django不敢处理了所以就不动了 等这你来处理
           print(res)  # 是bytes类型
           import json
           res = json.loads(res)
           print(res)
           from django.http import JsonResponse  
           return JsonResponse(res, safe=False)
   
       return render(request, 'sumPage.html', )
   
   

   

   

ajax携带文件数据

前端

<input type="file" id="d2">
<button id="btn">提交</button>
<script>
    $('#btn').click(function () {
        //1.先产生一个ForDate对象
        let myFormDataObj = new FormData();
        //2.往对象中添加普通数据
        myFormDataObj.append('name', 'jason')
        myFormDataObj.append('age', 18)
        //3.往该对象中添加文件数据
        myFormDataObj.append('file', $('#d2')[0].files[0])
        //4.发送ajax请求
        $.ajax({
            url: '',
            type: 'post',
            data:myFormDataObj,

            // ajax发送文件固定的两个配置
            contentType:false,
            processData:false,
            success: function (args) {
                alert(args)
            }
        })
    })


</script>

后端

def sum_func(request):
    if request.method == 'POST':
        res = request.POST
        print(res)
        res = request.FILES
        print(res)
        return HttpResponse('呵呵呵')

    return render(request, 'sumPage.html', )

ajax补充说明

主要是针对回调args接收到的响应数据

1. 后端request.is_ajax()

   用于判断当前请求是否有ajax发出

2. 后端返回的三板斧都会被args接收不再影响整个浏览器页面

3. 选择使用ajax做前端交互的时候 后端一般返回的是都字典数据

   user_dict = {'code': 1000, 'username': '小阳人', 'hobby': '哎呦喂'}

ajax自动反序列化后端的json格式的bytes类型数据dataType:'json'