显示问题
php 代码:
postman:
浏览器调试器 - post 传值:
浏览器调试器 - 预览里数据:
问题分析
通过 Chrome 控制台,查看请求 Headers 参数,通过 axios 发送的POST请求,请求Headers与普通的 form 表单提交的请求头 Headers不同。
(1) 通过Chrome控制台,查看请求Headers参数,Form Data 部分如下:
{"hid":2259,"type_id":134,"fl":1}
点击 “view source” 查看源码,提交参数还是json格式:
{"hid":2259,"type_id":134,"fl":1}
(2) 正常的form表单提交,Form Data参数应该是这样的: 问题出在axios 的 headers 的Content-Type
hid: 2259
type_id: 134
fl: 1
点击 “view source” 查看源码,是一个字符串形式:
hid=2259&type_id=134&fl=1
这是因为,axios 默认是使用 payload 形式提交是数据,而 jQuery 则默认使用 form 表单提交的数据。而通过 payload 形式的数据 PHP $_POST 无法接受到。
解决办法
import Qs from 'qs';
var axiosAjax = axios.create({
baseURL:'/',
// <---- 这里使用 qs 转换参数
transformRequest: [function (data) { // 转换数据
data = Qs.stringify(data); // 通过Qs.stringify转换为表单查询参数
return data;
}],
headers:{
'Content-Type':'application/x-www-form-urlencoded' // 必须设置当前的格式
}
})
qs可通过npm install qs命令进行安装,是一个npm仓库所管理的包。
npm install qs
而qs.stringify()将对象 序列化成URL的形式,以&进行拼接。
JSON是正常类型的JSON,请对比一下输出
var a = {name:'hehe',age:10};
qs.stringify(a)
// 'name=hehe&age=10'
JSON.stringify(a)
// '{"name":"hehe","age":10}'*************************************************