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

素颜马尾好姑娘i 2023-07-10 14:06 17阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llem9uZ3poZW4_size_16_color_FFFFFF_t_70][]

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

然后稍微改成这样:

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llem9uZ3poZW4_size_16_color_FFFFFF_t_70 1][]

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

![format_png][]

ajax方式：

![format_png 1][]

一个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)

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

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llem9uZ3poZW4_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200302213105302.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llem9uZ3poZW4=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llem9uZ3poZW4_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200302213351278.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llem9uZ3poZW4=,size_16,color_FFFFFF,t_70
[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8yMDYzNTkzLTQ5OWFjYWY0ZmRiNGJjMzUucG5n?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8yMDYzNTkzLWY2YTEyMmJmYmI5N2Q4YzMucG5n?x-oss-process=image/format,png