VUE 之Request Payload 和from Data

最近用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'
        }