关于vue- axios的post请求到后台数据为空的两种解决方法

 在vue里面的这种情况是默认使用get方式传值到后台，当你数据过大的时候，会导致你的拼接长度有限。

然后稍微改成这样:

这样就会使得与后台的交互方式为POST请求。但是出现了后台接到的值为空的现象。后面对比ajax发现axios传值，再具体观察控制台发现

 ajax方式：

 

一个Request Payload，一个Form Data。
将Request Payload 转为Form Data格式就可以了，有三种方式：

一、使用qs（推荐）

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

 

npm install qs --save-dev

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

 

import qs from 'qs'

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

 

            var id = this.form.id;
        	var name = this.form.name;
        	var sex = this.form.sex;
        	var hobby = this.form.hobby;
        	var datetime = this.form.datetime;
        	var address = this.form.address;

let postData = qs.stringify({
            id：id,
            name:name,
            sex:sex,
            hobby:hobby,
            datetime:datetime,
            address:address
})

这样发送给后台时就是Format Data格式了。

二、使用URLSearchParams

 

            var postData= new URLSearchParams()
			var id = this.form.id;
        	var name = this.form.name;
        	var sex = this.form.sex;
        	var hobby = this.form.hobby;
        	var datetime = this.form.datetime;
        	var address = this.form.address;
        	postData.append('id',id)
        	postData.append('name',name)
        	postData.append('sex',sex)
        	postData.append('hobby',hobby)
        	postData.append('datetime',datetime)
        	postData.append('address',address)

这样也可以，个人觉得写起来麻烦。

两种种方法的原理是一样一样的，都是转化为字符串。个人推荐的是第一种方法。