最近用vue做项目使用axios发送post请求时遇到了前端传数据后端接收不到的情况:
代码:
image.png
后来仔细对比ajax发现axios传值是这样的:
image.png
而ajax传值是这样的:
image.png
一个Request Payload,一个Form Data。
将Request Payload 转为Form Data格式就可以了,有三种方式:
一、使用qs(推荐)
首先在你的项目里安装qs模块:
首先在你的项目里安装qs模块:
引入好了之后,把上面的postData用qs转一下再发送给后台就可以了:
这样发送给后台时就是Format Data格式了。
二、使用URLSearchParams
let postData= new URLSearchParams()
postData.append('certificationAccount', that.certificationAccount)
postData.append('balance', that.balance)
三、直接使用字符串
let postData ='certificationAccount =' + that.certificationAccount + '&balance=' + that.balance
es6
es6写法:
let postData = `
certificationAccount = ${that.certificationAccount}&balance=${that.balance}
`
三种方法的原理是一样一样的,都是转化为字符串,但第三种方法当所传的值为null时会被转化为空字符串,个人推荐的是第一种方法。
QS
通常一些小型的项目,没必要大费周章的搭建脚手架,直接以CDN的方式引入vue.js 即可享受到vue的便利性
那么我们想用到vue中的一些功能,比如axios 呢。
注意:Axios与Qs必须配合使用,否则后台会拿不到数据
CDN引入:
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.bootcss.com/qs/6.5.1/qs.min.js"></script>
Axios:<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
Qs:<script src="https://cdn.bootcss.com/qs/6.5.1/qs.min.js"></script>
使用方法:
let isurl = "www.xxxxx.com/list";
let o={
id:2
}
axios.post(isurl,Qs.stringify(o)).then(res=>{
console.log(res);
}).catch(err=>{
console.log(err);
})
axios.post 修改header头的方法:
axios.post(isurl,Qs.stringify(o),{'
header:{
'Content-Type': 'multipart/form-data'
}