数据提交类型 Request Payload 与 Form Data 的区别总结

2.不同的Content-Type对应不同的提交方式

数据传输中一般类型只有3种
1.Content-Type: text/plain
2.Content-Type: application/x-www-form-urlencoded
3.Content-Type: application/json

• 传统ajax请求方式

  Content-Type：text/plain

function submit2() {
    var xhr = new XMLHttpRequest();
    xhr.timeout = 3000;
    var obj = {a: 1, b: 2};
    xhr.open('POST', '/');
    xhr.send(obj);
}
1
2
3
4
5
6
7

需要通过xhr.send(JSON.stringify(obj)) 修改为字符串后进行传输。

Content-Type: text/plain
Request Payload:  #字符串
1
2

• axios方式请求

  Content-Type：application/json 和 Content-Type: application/x-www-form-urlencoded

function submit3() {
    var sence1 = 'name=123&val=456';
    var sence2 = {name: 123, val: 456};
    axios.post('/', sence1)
}
1
2
3
4
5

# 请求数据为“字符”时：
Content-Type: application/x-www-form-urlencoded
Form Data:  #name=123&val=456

# 请求数据为“对象”时：
Content-Type：application/json
Request Payload:  #{name:123,vla:456}
1
2
3
4
5
6
7

• Form表单提交

<form action="/" method="POST">
    <input name="name" type="text">
    <input name="password" type="text">
    <button>提交</button>
</form>
1
2
3
4
5

Content-Type: application/x-www-form-urlencoded
Form Data： # name='xxx'&password='yyy'
1
2

3.总结

Content-Type的差异