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

大纲

1.什么是`Request Payload`，什么是`Form Data`
2.不同的`Content-Type`对应不同的提交方式
3.总结

图形：

1.什么是Request Payload，什么是Form Data

Request Payload （http请求体模式）
Form Data （表单请求体模式）

Request Payload 对应：

Content-Type：application/json

Form Data 对应：

Content-Type: application/x-www-form-urlencoded
和
Content-Type: multipart/form-data

备注：表单（POST请求）的编码

<form action="/xxxx" method="get" enctype="application/x-www-form-urlencoded">
<form action="/xxxx" method="get" enctype="multipart/form-data">
<form action="/xxxx" method="get" enctype="text/plain">

类型	含义
application/x-www-form-urlencoded	默认编码方式， 将数据编码成键值对形式
multipart/form-data	表单文件上传
text/plain	字符串型，数据获取方式 getInputStream

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);
}

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

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

• 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)
}

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

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

• Form表单提交

<form action="/" method="POST">
    <input name="name" type="text">
    <input name="password" type="text">
    <button>提交</button>
</form>

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

3.总结

Content-Type的差异

模式	类型
ajax	Content-Type默认为 “文本” 类型
form提交	Content-Type默认为 “Form” 类型
axios传递字符串	Content-Type默认为 “Form” 类型
axios传递对象	Content-Type默认为 “JSON” 类型