vue中axios的post请求使用form表单格式发送数据

时间:2023-03-09 18:15:30
vue中axios的post请求使用form表单格式发送数据

vue使用插件qs实现 (qs 是一个增加了一些安全性的查询字符串解析和序列化字符串的库。)

在jquery中的ajax的方法已将此封装,所以不需要再次序列化

1. 安装   在项目中使用命令行工具输入:npm install qs

2.引入    安装完成后在需要用到的组件中:import qs from 'qs’

3.使用    qs.parse(data)和qs.stringify(data)

qs.parse()是将URL解析成对象的形式
qs.stringify()是将对象 序列化成URL的形式,以&进行拼接

          this.$axios({
method: 'post',
url: '/api/updateOrderStatus', // 路径
data: {
name: sloanLv,
         pwd: 123456
},
transformRequest: [function (data) {
let ret = '';
ret = Qs.stringify(data);
        // 注释方法是不使用插件
// for (let it in data) {
// // ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&';
// ret += it + '=' + data[it] + '&';
// }
return ret;
}],
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
}).then((res) => {
console.log(res);
}).catch((err) => {
console.log(err);
});