常见的ajax请求头Content-Type

Content-Type指定参数的常见格式：form-data、x-www-form-urlencoded、application/json、json。content-type的取值是告诉服务端，你传递过去的内容是啥，你应该准备好如何接收。

一、application/x-www-form-urlencoded

是Ajax默认的请求类型，浏览器的原生 form 表单，如果不设置 enctype 属性，那么最终就会以 application/x-www-form-urlencoded 方式提交数据。前端可以以对象方式直接给后端，或者以json方式传给后端， 当action为get时候，浏览器用x-www-form-urlencoded的编码方式把form数据转换成一个字串（name1=value1&name2=value2…），然后把这个字串append到url后面，用?分割，加载这个新的url。 当action为post时候，浏览器把form数据封装到http body中，然后发送到server。

在浏览器控制台可以看到它们的内容都是以‘From Data’形式展现

前端处理如下：
//在vue组件的js中
login(){
    let that = this;
   that.user = {  //  用户信息
            uphone:"",  //  用户账号或手机号
            password:"",  //  登录密码 
        };
   that.axios.post( '/api/login', that.qs.stringify(that.user)）.then(res=>{
        console.log(res);
        });
    // 注意，其中的_this.user就为普通的json数据,qs.stringify转化后参数为：‘uphone=aaa&password=85’
    // qs.stringify()将json数据处理为字符串式表单数据
}

二、application/json

当请求类型为post时，数据必须以json格式传给后端，这时后端不能直接接受到数据，必须用$GLOBALS[‘HTTP_RAW_POST_DATA’]取出来，然后再json_decode就行了。

    //在vue组件的js中
    login(){
        let that = this;
        let api = ;
      that .user = {	//用户信息
                uphone:"",	//用户账号或手机号
                password:"",  //登录密码
            };
      that.axios.post('/api/login', that.user).then(res=>{
            console.log(res);
            });
    }

三、multipart/form-data

使用表单上传文件时，必须让 form 的 enctype 等于这个值。

<form action="/" method="post" enctype="multipart/form-data">
  <input type="text" name="description" value="some text">
  <input type="file" name="myFile">
  <button type="submit">Submit</button>
</form>

传送的数据一般为文件、图片等数据，此时，需要对数据进行如下处理：

//在vue的js中
data(){
    return{
        params:{
            file:"",//上传文件
        }
    }
}
methods:{
    update(){
        let that = this;
        that.axios.post( '/api/updateFile', that.transformData(that.params), {
            headers:{
                "content-type":"multipart/form-data"
            }
            }）.then(res=>{
            console.log(res);
            }); 
    },
    // 转化为formdata格式
    transformData(obj){
        let that = this;
        let ms= new FormData();
        Object.keys(obj).forEach(key=>{
            ms.append(key,obj[key]);
        });
        return ms;
    }
}

【拓展延伸：由于form表单会有默认事件，需要阻止默认事件（js用e.preventDefault()或return false;(ie) / jq用return false;），我们就直接在form表单上加οnsubmit=“return false;”。或者也可以直接不用form标签。】