FormData和Payload是浏览器传输给接口的两种格式，这两种方式浏览器是通过Content-Type来进行区分的，如果是 application/x-www-form-urlencoded的话，则为Form Data方式，如果是application/json或multipart/form-data的话，则为 Request Payload
的方式。
GET请求：
- 参数会以url string的形式进行传递。即?后的字符串则为其请求参数，并以&作为分隔符
- 但是受限于请求URL的长度限制，一般参数较少时会使用get请求。
POST请求：
- 当参数数量较多，且对数据有一定安全性要求时，会考虑用post请求传递参数数据。POST请求的参数数据是在请求体中。
- 即参数会以Form Data的形式进行传递，不会显式出现在请求url中
其中：
GET：
-
Query String Parameters
image.png
image.png
POST：
-
Form Data
image.png
image.png
-
Request Payload
image.png
image.png
Query String Parameters
请求头为：
// General
Request URL: http://foo.com?x=1&y=2
Request Method: GET
// Query String Parameters
x=1&y=2
Form Data：
默认的content-type：content-type为application/x-www-form-urlencoded
请求头为：
// General
Request URL: http://foo.com
Request Method: POST
// Form Data
x=1&y=2
Request Payload：
content-type：application/json
// General
Request URL: http://foo.com
Request Method: POST
// Request Payload
x=1&y=2
相关扩展阅读：
细节
好了，到这里我们知道了，其实都是放到了payload中。那么具体有什么区别呢？为什么有时候后端拿不到值呢？这就不得不说对payload的解析方式了。我们以几个chrome下的测试案例，来理一理这个逻辑。
传统的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。
值得形式是以key1=value1&key2=value2的形式提交的。
传统的ajax提交
场景构造
function submit2() {
var xhr = new XMLHttpRequest();
xhr.timeout = 3000;
var obj = {a: 1, b: 2};
xhr.open('POST', '/');
xhr.send(obj);
}
首先我们构造一个简单的函数，然后触发它。通过chrome反馈来看：
注意点
1.默认的Content-Type为text/plain。
2.Request Payload会对非字符串做字符串转换。
3.通过xhr.send(JSON.stringify(obj));可修正要发的内容
axios方式提交
场景构造
由于axios已经是vue、react的准标配请求方式了，所以这里探究一下它。
首先我门看axios的文档，当post提交时候可以传递什么类型参数：
注意这个类型，我们分别构造两个场景。对应它。
function submit3() {
var sence1 = 'name=123&val=456';
var sence2 = {name: 123, val: 456};
axios.post('/', sence1)
}
分别传递字符串与对象，提交post请求，然后观察结果:
场景1——传递字符串时候的结果：
场景2——传递对象的结果：
注意点
1.当我们传递字符串的时候，Content-Type自动转为xxx-form-xxx的形式。当为对象的时候，自动转化为xxx/json。
2.字符串的时候以key1=val1&key2=val2的形式体现，对象以JSON字符串形式体现。
总结
探索了这么多种情况之后，那么我们回顾一下：
Content-Type的差异
1.传统的ajax请求时候，Content-Type默认为"文本"类型。
2.传统的form提交的时候，Content-Type默认为"Form"类型。
3.axios传递字符串的时候，Content-Type默认为"Form"类型。
4.axios传递对象的时候，Content-Type默认为"JSON"类型
Content-Type的值，Form与非Form时，payload的区别。
1.都只支持字符串类型(以上探究的几种情况)
2.Form需要传递的格式为key1=value1&key2=value2,类似GET请求的QueryString格式
3.非Form一般为JSON.stringify(formDataObject)形式
后端取不到值？
无论何种形式传递，后端解析表单信息的时候，会考虑Content-Type。如果是JSON字符串的话，后端解析payload的内容时候，肯定要去解析JSON啦。如果是key1=value1&key2=value2的形式，则需要去分割字符串。
当然这些事情一般后端使用的框架会去处理，但是框架给后端提供取值接口有可能是不同的，所以前端的小伙伴在处理请求问题时，一定要跟后端小伙伴商量好，是用JSON还是FormData哈。
网友评论