前言:
很多小伙伴在前后端联调时,可能都稿不太清chrome-dev-tools(F12调试器)中的
FormData
、RequestPayload
、Query String Parameters
介绍
什么是 FormData
?什么是 RequestPayload
?什么是 Query String Parameters
? 直接上图:
三者对比
HTTP请求中不同的请求方式和设置不同的Content-Type时,参数传递
的方式会不一样,一起了解这三种形式:Query String Parameters、Form Data、Request Payload;
一. GET请求
Query String Parameters格式: ?key=value&key=value
GET请求时,参数会以url string 的形式进行传递,即?后的 字符串
则为其请求参数,并以&作为分隔符。
举栗子:
Request URL: http://test.com?from_type=省&from_name='四川省'
Request Method: GET
Query String Parameters 就是 from_type=省&from_name='四川省'
二. Post请求
post请求会出现两种形式的请求体:
FormData格式:key=value&key=value
键值对形式
Content-Type: application/x-www-form-urlencoded
原因:当发起一次Post请求,若未指定Content-type
,则默认 content-type为application/x-www-form-urlencoded
,即参数会以 FormData 的形式(数据为 string 键值对格式)进行传递,不会显示出现在请求URL中。
Request Payload格式:{key: value, key: value}
json形式
Content-Type需指定↓↓↓
Content-Type: application/json
原因:当发起一次post请求,若 Content-Type为application/json
,则参数会以 Request Payload
的形式进行传递(数据格式为json),不会显示出现在请求url中。
注意:在使用 ajax 跨域请求时,如果设置 Header 的 ContentType
为 application/json
,它会发两次请求,第一次先发 Method为OPTIONS
的请求到服务器,
这个请求会询问服务器支持那些请求方法(比如GET,POST)等。如果这个请求支持跨域的话,就会发送第二个请求,否则的话在控制台会报错,第二个请求不会请求。
小结
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)
形式
资料来源:
[1] MDN-GET
[2] MDN-POST
[3] MDN-GET
[4] 社区资料1
[5] 社区资料2
[6] 社区资料3