HTTP请求中的传参方式form data、 request payload、query string parameters三者对比

目录

一、GET请求

Query String Parameters

二、POST请求

2.1 FormData

2.2 Request Payload

补充：

Post请求总结：

---

HTTP请求中不同的请求方式和设置不同的Content-Type时，参数传递的方式会不一样，以下对这三种形式做个总结：Query String Parameters、Form Data、Request Payload；

一、GET请求

Query String Parameters

GET请求时，参数会以url string 的形式进行传递，即?后的字符串则为其请求参数，并以&作为分隔符。参数直接反映在url里面，形式为key1=value1&key2=value2形式，

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

二、POST请求

如果是post请求，那么表单参数是在请求体中，也是以key1=value1&key2=value2的形式在请求体中。

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

2.1 FormData

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

 Content-Type为application/x-www-form-urlencoded被认为是http post表单请求

 Content-Type为application/json;charset=UTF-8，而请求表单参数在RequestPayload块中。

2.2 Request Payload

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

补充：

如果对headers参数进行修改，

 var vm = this
 this.$http.post(
 vm.testUrl,
 {"name":"痞子达"},
 {headers:{'Content-Type':'application/x-www-form-urlencoded'}})
 .then((response)=>{
         alert(response.data.msg);
})

content-type:'application/json;charset=UTF-8'这种是最常见的一种数据请求格式，这个数据格式是： axios将js对象序列化为JSON，因为传过去的是key字符串，并且value是没有值的，

 后端打印出来是这样的：

array(1) { ["{"name":"痞子达"}"]=> string(0) "" }

这肯定获取不到啊，可以尝试将其转换为query参数。引入Qs，这个库是axios里面包含的，不需要再下载了。

import Qs from 'qs'
 var vm = this
var data = Qs.stringify({"name":"痞子达"});
 this.$http.post(vm.testUrl,data, {headers:{'Content-Type':'application/x-www-form-urlencoded'}}).then((response)=>{
     alert(response.data.msg);
})

然后再去控制台看看 form-data，则效果如下：

 参考：POST传参序列化_qq_43765727的博客-CSDN博客_post 序列化

 Post请求总结：

如果请求的Content-Type设置为application/x-www-form-urlencoded，那么这个Post请求被认为是HTTP POST表单请求，参数出现在

其他情况如使用原生AJAX的POST请求如果不指定请求头Request Header，默认使用的Content-Type是text/plain;charset=UTF-8，参数出现在Request payload块

Vue 使用axios 发送post请求,参数格式有错误问题

网上很多都是使用post发送的例子,但是在使用过程当中参数有问题,一直报参数无法present的问题,需要引入QS对参数进行转换,且要设置Content-Type,这样就可以了