ajax传formdata类型的数据_ajax post数据发送类型Content-Type详解

application/x-www-form-urlencoded

首先，Content-Type 被指定为 application/x-www-form-urlencoded；其次，提交的数据按照 key1=val1&key2=val2 的方式进行编码，key 和 val 都进行了 URL 转码。大部分服务端语言都对这种方式有很好的支持。例如 PHP 中，$_POST['title'] 可以获取到 title 的值，$_POST['sub'] 可以得到 sub 数组。

case1: 表单自动提交

提交

Form data : name=123&age=123

case2: Jquery.ajax post类型的默认发送类型

Jquery.ajax({

url: '/jquery-urlencoded',

type: 'post',

data: {

a: 1, b: 2,

c: { a: 1, b: 2 }

},

success: () => { },

error: err => console.log(err)

})

Form Data : a=1&b=2&c%5Ba%5D=1&c%5Bb%5D=2

case3: 修改axios的默认请求头并转化数据格式

Axios({

url: "/axios-urlencoded",

method: "post",

headers: {

"Content-Type": "application/x-www-form-urlencoded;charset:UTF-8"

},

data: qs.stringify({

a: 1, b: 2,

c: { a: 1, b: 2 }

})

}).then(() => { })

Form Data : a=1&b=2&c%5Ba%5D=1&c%5Bb%5D=2

在使用axios时，修改Content-Type(默认值application/json)，并且用qs转化数据格式，也是因为后台语言更支持application/x-www-form-urlencoded类型，否则某些后台语言、框架会接收不到数据

multipart/form-data

case1 : ajax post提交的数据为FormData对象时， Content-Type自动设置为multipart/form-data

const xhr = new XMLHttpRequest();

const fd = new FormData();

fd.append('name', 'liyang');

fd.append('avatar', this.$refs.image.files[0]);

xhr.open("POST", '/native-ajax-form-data', true);

xhr.onreadystatechange = function () {

if (xhr.readyState == 4 && xhr.status == 200) {

alert(xhr.responseText); // handle response.

}

};

xhr.send(fd)

------WebKitFormBoundaryEUDwjVQS6V8tkel4

Content-Disposition: form-data; name="name"

liyang

------WebKitFormBoundaryEUDwjVQS6V8tkel4

Content-Disposition: form-data; name="avatar"; filename="upload.png"

Content-Type: image/png

------WebKitFormBoundaryEUDwjVQS6V8tkel4--

case 2: form enctype属性设置为multipart/form-data时

提交

------WebKitFormBoundarymbGh3Kll05jGm3Zt

Content-Disposition: form-data; name="name"

liyang

------WebKitFormBoundarymbGh3Kll05jGm3Zt

Content-Disposition: form-data; name="age"

13

------WebKitFormBoundarymbGh3Kll05jGm3Zt--

application/json

用于提醒后台提交的是json字符串形式的数据。优点在于传输{a:[{a:[1,2,3]}]}这种复杂结构的数据，使用json形式要比键值对形式更直观更方便，后台接收到数据后，直接转化类型即可使用

case1 : axios post默认格式

Axios.post('/axios', {

a: 1, b: 2,

c: { a: 1, b: 2 }

}).then(res => {

console.log(res)

}).catch(err => {

console.log(err)

})

Request Payload : {"a":1,"b":2,"c":{"a":1,"b":2}}

case 2 : jquery设置Content-type，并转化数据为字符串

Jquery.ajax({

url: '/jquery-application-json',

type: 'post',

processData: false,

contentType: "application/json;charset=UTF-8",

data: JSON.stringify({

a: 1, b: 2,

c: { a: 1, b: 2 }

}),

success: () => { },

error: err => console.log(err)

})

Request Payload : {"a":1,"b":2,"c":{"a":1,"b":2}}