Ajax

ajax不是一门新的技术并且有很多版本，我们目前学习的是jquery版

Ajax简介

Ajax即Asynchronous Javascript And XML 也就是异步 JavaScript和 XML

• 异步：和同步对应
• JavaScript：通过JavaScript来操作，发送请求到服务端
• XML：数据交互使用XML，现在主流使用JSON格式
• 局部刷新：JS的DOM操作

即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML,现在更多使用json数据）

基本语法

	$.ajax({
        url:'',  
        type:'post',  // 请求方式 默认也是get
        data:{'v1':v1Val, 'v2':v2Val}, 
        success:function (args) {  // 后端返回结果之后自动触发 args接收后端返回的数据
         	 $('#d3').val(args)
                                }
    })

• url

  有三种填写方式，与form标签的action一致

  1）不填写--超当前地址提交

  2）填写一个完整的网址--超完整网址提交

  3）路由--超该路由提交

• type

  请求方式 默认也是get

• data

  发送的数据，以字典的形式发送

• success

  异步回调函数

  args接收后端返回的数据

如何发送ajax：

• 通过绑定点击事件
• input框监听事件

content-Type参数

编码格式，类似于数据报头

1.urlencoded

ajax默认的编码格式、form表单默认的格式

数据格式 ：xxx=yyy&uuu=ooo&...

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

2.form data

包括文件数据

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

3.Application/json

ajax支持发送的数据

• 普通数据urlencoded
• form data
• Application/json

request.body 前端发送的数据都先放在body中，如果是普通数据发送给POST，如果是文件会将普通数据放到POST中，文件数据交给FILES中

而json格式的数据则不处理放在body中，后端自己处理json格式数据

ajax携带文件数据

<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>