• Ajax
  • 一、特点
  • 二、Ajax和form表单的区别
    • form表单：
    • Ajax：
  • 三、基础语法
  • 四、数据编码格式
  • 五、Ajax携带文件数据
  • 六、回调函数
  • 七、序列化

Ajax

一、特点

异步提交，局部刷新

Ajax其实是js自带的功能，不是一门新的技术点，我们学习的是jQuery封装之后的版本，使用之前要先导入jQuery

二、Ajax和form表单的区别

form表单：

​ 每次提交数据都会刷新整个页面，将所有数据同时提交，同时校验

Ajax：

​ 异步提交，不会刷新整个页面

三、基础语法

$.ajax({
    url:'',  # 控制数据的提交地址
    type:'',  # 控制请求方式（默认get请求）
    data:{},  # 组织提交的数据
    success:function(){
        异步回调函数
    }
})

四、数据编码格式

Content-Type
格式1：urlencoded
	数据格式：name=zhang&pwd=123&hobby=read
    django后端统一处理到request.POST中

格式2：formdata
	数据格式：无法查阅
    django后端自动将'文件数据'处理到'request.FILES'，将'普通数据'处理到'request.POST'
    
格式3：application/json
	数据格式：json格式
    django后端不会处理，在request.body中存储(bytes类型)自己处理
    # 语法注意事项
    data:JSON.stringify({'name':'zhang','pwd':123}),contentType:'application/json'

五、Ajax携带文件数据

$('#d3').click(function(){
    # 产生内置对象
    let formData = new FormData():
    # 添加普通数据
    formData.append('username',$('#d1').val())
    # 添加文件数据
    formData.append('file',$('#d2')[0].filees[0])
    # 发送Ajax请求
    $.ajax({
        url:'',
        type:'post',
        data:formData,
        contentType:false,  # 不使用任何编码
        processData:false,  # 不处理数据对象
        success:function(args){
            回调函数
        }
    })
})

六、回调函数

​ 后端跟Ajax交互，不应该在返回页面，通常情况下都是返回json格式数据

​ 前端针对HttpResponse和JsonResponse返回的json格式数据处理策略不同

​ ​HttpResponse：不会自动反序列化；

​ JsonResponse：会自动反序列化;

​ HttpResponse自动反序列化需要添加一个固定参数：dataType:'JSON'

七、序列化

def ser(request):
    # 拿到用户表里面所有的用户对象
    user_list=models.User.objects.all()
    # 倒入内置序列化模块
    from django.core import serializers
    # 调用该模块下的方法，第一个参数是序列化数据的方式
    ret=serializers.serialize('json',user_list)
    return HttpResponse(ret)