Ajax

Ajax的简介及用法

Ajax是指异步JS和XML，使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。

Ajax有很多版本，这里介绍的是jQuery版本的：

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

后端依旧需要按照响应HttpResponse对象。

contentType属性

urlencoded

ajax默认的编码格式、form表单默认也是这种编码格式，数据组织格式为xxx=yyy&uuu=ooo&aaa=kkk

在请求方式为post时，django会将其处理好后存储到request.POST中，通过get、getlist取值。

formdata

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

application/json

这是form表单所不支持的数据编码，ajax可以传输序列化后的json数据，发送给后端，并且不做处理，放在request.body中。后端每个语言都有自己的处理方式。

携带文件数据设置

携带文件数据，contentType属性需要设置为false，直接传入FormData对象。

通过这种方式提交的普通数据依旧在POST中，文件数据在FILES中。

<script>
    $('#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>