Ajax

Ajax

ajax不是一门新的技术并且有很多版本，我们目前学习的是jQuery版本，各版本之间本质是一样的

Ajax的特点是异步提交，局部刷新

Ajax基本语法

基本语法
	$.ajax({
        url:'',  // 后端地址 三种填写方式 与form标签的action一致
        type:'post',  // 请求方式 默认也是get
        data:{'v1':v1Val, 'v2':v2Val},  // 发送的数据
        success:function (args) {  // 后端返回结果之后自动触发 args接收后端返回的数据
    	$('#d3').val(args)
                                }
    })

Ajax可以实现的功能

实现像上图一样的输入用户名后发送到后端进行判断，并将判断结果传输到前端进行展示

Content-type

1.urlencoded
	ajax默认的编码格式、form表单默认也是
	数据格式  xxx=yyy&uuu=ooo&aaa=kkk
 	django后端会自动处理到request.POST中
    
2.formdata
	django后端针对普通的键值对还是处理到request.POST中 但是针对文件会处理到request.FILES中
	
    
3.application/json
	form表单不支持 ajax可以
	<script>
    $('#d1').click(function () {
        $.ajax({
            url:'',
            type:'post',
            data:JSON.stringify({'name':'jason','age':18}),  // 千万不要骗人家
            contentType:'application/json',
            success:function (args) {
                alert(args)
            }
 
        })
    })
</script>
	后端需要从request.body中获取并自己处理

urlencode

针对表单提交数据：
发送普通文本时用request.POST可以接收
发送文件用request.FILES可以接收

Django分辨数据接收类型的原因在于提前告知了数据编码格式

Ajax请求、表单请求的默认编码格式是urlencode:

也就是这样类似于键值对的数据：

这种格式的数据django会自动处理到request.POST中

fromdata

form表单提交文件时的编码格式是fromdata
对于这种编码格式的数据Django会自动处理到request.FILES中
编码格式是怎么处理数据的依据

再看以前的例子，对于提交文件的表单：

由于表单提交默认是urlencode编码格式，所以会把文件处理到POST里面去了，所以需要提前告知Django我们发送的数据类型

application/Json

ajax支持第三种数据编码application/json,也就是传json字符串
同时ajax也支持get，post之外的请求
先要进行序列化:

回调函数：

点击按钮后查看视图层：

发现无论是POST还是FILES都无法获取到json数据

Json格式的数据POST,FILES都拿不到,而是放在request.body

所有的请求数据第一时间都是存在request.body,body内的数据经过处理之后给post、files等
而json格式由于过于重要，Django不会进行处理,而是直接返回二进制
只有json编码格式才能查看request.body

反序列化查看json数据：

自定义request.JSON

这里相当于我们给request对象添加了一个属性，我们人为的将数据存放在了request对象,在对象中新增了JSON这个名字,所以后续也可以通过request.JSON获取json字符串

总结：websocket（大字典） Django（request对象）对请求的数据进行了两次封装，drf会对请求数据继续第三次封装

我们可以通过点的方式给对象增加新的属性

Ajax携带文件数据

 $('#d3').click(function () {
        // 1.先产生一个FormData对象
        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>