vue --- axios发post请求后台接收不到参数的三种解决方案

逃离我推掉我的手 2021-12-20 09:07 563阅读 0赞

最近用vue 做项目使用axios 发送post 请求时遇到了前端传数据后端接收不到的情况：

![1278249-20190116143625141-1729702827.png][]

后来仔细对比发现axios传值是这样的：

![1278249-20190116143407334-2099652130.png][]

而 ajax 传值是这样的：

![1278249-20190116143427685-1100897546.png][]

一个 Request Payload , 一个Form data.

将Request payload 转为 from data 格式就可以了。有四种方式：

**一：使用qs(推荐)**

首先在你的项目里安装qs 模块。

npm install qs --save-dev

然后在需要使用的页面引入一下：

import qs from 'qs'

引入好了之后，把上面的postData用qs转一下再发送给后台就可以了：

let postData = qs.stringify({
            certificationAccount: that.certificationAccount,
            balance: that.balance
    })

这样发送给后台时就是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写法：

let postData = `
              certificationAccount = ${that.certificationAccount}&balance=${that.balance}
    `

**四：JSON.stringify()**

转载于:https://www.cnblogs.com/yuerdong/p/10277177.html

[1278249-20190116143625141-1729702827.png]: /images/20211220/f4c6061334da441f82b01cfbcdfbde7d.png
[1278249-20190116143407334-2099652130.png]: /images/20211220/2db3071515da48c38f3ff48dbb0b00d6.png
[1278249-20190116143427685-1100897546.png]: /images/20211220/7a88ecf168034703802526d3199df85f.png