vue2.0 axios post请求传参问题（ajax请求）

最近需要做一个项目用vue，由于之前没接触过所以也想挑战下，我不会撘项目，果断选择网上现成搭好的项目。最后我们选择了vue-element-admin网上项目地址放这里

axios post请求问题

项目中用的ajax请求是 axios

废话不多说直接上 axios中文文档 我建议在做项目之前先看一下文档，因为说实话这个文档不是太难，先自己吃一下看看能不能咽下去。

我自己在做项目的时候（后端PHP）发现一个问题 Content-Type: application/x-www-form-urlencoded;charset=UTF-8 设置成form了但是后端还接受不到数据。

请求的配置 但是发现传的参数全在key上边:

后端帮我们打印的接收参数(没有接收到):

去百度了一下才明白 : axios默认发送数据时，数据格式是Request Payload，并非我们常用的Form Data格式，所以参数必须要以键值对形式传递，不能以json形式传参

传参方法

1. 使用transformRequest，在请求发送前将请求数据进行转换
2. 如果使用模块化开发，可以使用qs模块进行转换
3. new URLSearchParams()

第一种方法解决：

// 这是我创建的 axios实例 
const service = axios.create({
  // 自己的项目配置
  baseURL: 'http://www.management.com/',
  timeout: 30000,
  method: 'post',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
  },
  // 请求预处理函数 可以把你传的param进行处理
  transformRequest: [
    data => {
	  // data 就是你post请求传的值
	  // 一下主要是吧数据拼接成 类似get格式
      let params = ''
      for (var index in data) {
        params += index + '=' + data[index] + '&'
      }
      return params
    }
  ]
})
复制代码

上面的 transformRequest 主要就是把值处理成如下格式：

这样子我们在发一次请求：

后端接收到了 这是第一种解决办法（本人项目就是用的这种方法。 但是后来忘记是什么原因了 还是使用了第二种方法）

第二种方法解决：

尴尬的事情，由于第一种结局方法后端能接收到，但是不好处理，所以我最后还是使用了 qs 这种办法。（这种办法方便明了，极力推荐使用这个方法）

var qs = require('qs');
axios.post('/demo', qs.stringify({ 'params': 7758521 }, { indices: false }))
复制代码

qs功能请参考 自行参考

第三种方法解决：

var params = new URLSearchParams();
params.append('user', 'value1');
params.append('name', 'value2');
axios.post('/demo', params);
复制代码

请参考 new URLSearchParams() 详细说明文档

以上就是post传参遇到的问题。参考博客 blog.csdn.net/call_me_fly… www.cnblogs.com/yulingjia/p…

转载于:https://juejin.im/post/5b57221051882562552995fa