最近用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时会被转化为空字符串,个人推荐的是第一种方法

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐