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的格式,对象序列化
- 对象序列化
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,去除默认处理的方式