HTTP请求中不同的请求方式和设置不同的Content-Type时，参数传递的方式会不一样，一起了解这三种形式：Query String Parameters、Form Data、Request Payload；

GET请求

Query String Parameters

GET请求时，参数会以url string 的形式进行传递，即?后的字符串则为其请求参数，并以&作为分隔符。 General

Request URL: http://test.com?from_type=省&from_name='四川省'
Request Method: GET

Query String Parameters

from_type=省&from_name=‘四川省’

image.png

Post请求

post请求会出现两种形式的请求体：

FormData

当发起一次Post请求，若未指定Content-type，则默认content-type为application/x-www-form-urlencoded,即参数会以FormData的形式进行传递，不会显示出现在请求URL中。

image.png

Request Payload

当发起一次post请求，若Content-Type为application/json，则参数会以Request Payload的形式进行传递（数据格式为json）,不会显示出现在请求url中。

image.png

formData()方法

服务器为什么会对表单提交和文件上传做特殊处理，因为表单提交数据是名值对的方式，且Content-Type为application/x-www-form-urlencoded,而文件上传服务器需要特殊处理，普通的post请求（Content-Type不是application/x-www-form-urlencoded）数据格式不固定，不一定是名值对的方式，所以服务器无法知道具体的处理方式，所以只能通过获取原始数据流的方式来进行解析。

当我们遇到一些文件上传功能时，我们需要使用原生的formData()来进行数据组装，且content-type需要设置为multipart/formdata http请求头：

Request URL: http://test.com/upload
Request Method: POST

image.png

其中，WebKitFormBoundarysBkB6WoEBvbCRkmh为浏览器随机生成的boundary，作为分隔参数，作用等同于&。

HTTP POST 表单请求提交时，使用的Content-Type是application/x-www-form-urlencoded，而使用原生AJAX的POST请求如果不指定请求头RequestHeader,默认使用的Content-Type是text/plain;charset=UTF-8。

所以，在使用原生AJAX POST请求时，需要明确设置Request Header,即：

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');