HTTP 请求参数之三种格式-Toy模板网

这篇具有很好参考价值的文章主要介绍了HTTP 请求参数之三种格式。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

Query String Parameters 、Form Data 、 Request Payload 三种格式的区别。主要是因为 Content-Type（用于表明发送数据流的类型）与请求方式 method 不同，导致传递的数据格式不同。

1. Query String Parameters 格式： ?key=value&key=value

参数会以 url string 的形式进行传递,即?后的字符串则为其请求参数
常用在 GET 请求方式时使用

2. Form Data 格式：key=value&key=value 键值对形式

Content-type 设置为 application/x-www-form-urlencoded;charset=utf-8
参数会以 Form Data 的形式传递给接口，不会显示在接口 url 上。

3. Request Payload 格式：{key: value, key: value}

Content-type 设置为 application/json;charset=utf-8
参数会以 Request Payload 的形式(数据为 json 格式)传递给接口，不会显示在接口 url 上。

常见的Content-Type

页面资源类型: text/html, text/plain, text/css, text/javascript, image/jpeg, image/png, image/gif,
ajax的请求，表单提交或上传文件的常用的资源类型: application/x-www-form-urlencoded(默认), multipart/form-data, application/json, application/xml

设置Content-Type

原生XMLHttpRequest:

  xhr.setRequestHeader("Content-type","application/json;charset=utf-8")

2.jq ajax:

$.ajax({
  url: '/api/'
  methods: 'post'
  contentType: "text/xml"
})

3.axios:

axios.post(url, qs.stringify(params), {
  headers: {
    'Content-Type': 'application/json;charset=UTF-8'
  },
}).then(res => res.data)

或者 axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'

常用转化请求参数的方式

JSON.stringify()
axios中 qs.stringify()将对象或者数组序列化成URL的格式,对象序列化文章来源地址https://www.toymoban.com/news/detail-812792.html

对象序列化

let obj = {
  methods: 'query_stu'
  id: 1,
  name: 'chenchen'
}
qs.stringify(obj)
//   methods=query_stu&id=1&name=chenchen    这就是我们的传到服务器的url

数组序列化

let arr = [2,3]
qs.stringify({a:arr})
// 'a[0]=2&a[1]=3' url中会带有数组的下标a[0]、a[1]，这并不是我们一般的处理办法

// 常用并推荐使用
let arr = [2,3]
qs.stringify({a:arr},{indices:false});
// 'a=2&a=3' 注意这个格式，一般使我们常用的格式哦~

其中：indices:false，去除默认处理的方式

到了这里，关于HTTP 请求参数之三种格式的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！