Vue axios发post请求后台接收不到参数的三种解决方案及在header中传值
最近用vue做项目使用axios发送post请求时遇到了前端传数据后端接收不到的情况,在前端发送请求时报500.代码如下:首先,先引入axiosimport axios from 'axios'其次,请求链接let param = {username: '111',userpass: '1'}axios.post('/api/?requestflag=...
·
最近用vue做项目使用axios发送post请求时遇到了前端传数据后端接收不到的情况,在前端发送请求时报500.
代码如下:
首先,先引入axios
import axios from 'axios'
其次,请求链接
let param = {
username: '111',
userpass: '1'
}
axios.post('/api/?requestflag=loginsys', param, {
headers: {
// 当前版本
bbh: this.version,
// 区分系统
androidorios: 'ios'
}
}).then(res => {
console.log('请求成功')
}).catch(error => {
console.log('请求失败')
})
axios传值是这样的:
ajax传值是这样的:
一个Request Payload,一个Form Data。
将Request Payload 转为Form Data格式就可以了,有三种方式:
一、使用qs(推荐)
首先在你的项目里安装qs模块:
npm install qs --save-dev
然后在需要使用的页面引入一下:
import qs from 'qs'
引入好了之后,把上面的postData用qs转一下再发送给后台就可以了:
let postData = qs.stringify({
username: '111',
userpass: '1'
})
这样发送给后台时就是Format Data格式了。
二、使用URLSearchParams
let postData = new URLSearchParams()
postData.append('username', '111')
postData.append('userpass', '1')
这样也可以,个人觉得写起来麻烦。
三、直接使用字符串
let postData = 'username=' + '111' + '&userpass=' + '1'
es6写法:
let postData = `
username = ${'111'}&userpass=${'1'}
`
三种方法的原理是一样的,都是转化为字符串,但第三种方法当所传的值为null时会被转化为空字符串,个人推荐的是第一种方法。
更多推荐
已为社区贡献2条内容
所有评论(0)