数据提交类型 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” 类型 |