Request请求体中的3种格式,你都了解过吗?

365 阅读2分钟

大图

前言:

很多小伙伴在前后端联调时,可能都稿不太清chrome-dev-tools(F12调试器)中的 FormDataRequestPayloadQuery String Parameters


介绍

什么是 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 的 ContentTypeapplication/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