axios.js提交表单数据的解决办法

axios因为小巧而性能强大受到很多人的追捧，但是其默认的数据提交方式为Payload，这样给后台解析带来了较大的困扰，因为难以从Request中获取到参数，所以默认的数据对象拼装无法成功 ，尤其是采用Spring MVC的@ModalAttribute注解时(没有使用@RequestBody注解)。表单数据与Payload数据之间的差异请参见$.ajax使用总结(一)：Form提交与Payload提交。

解决方法如下：
1. 修改头部信息，将Content-Type改为“application/x-www-form-urlencoded”; charset=UTF-8”;
2. 将数据进行“form-urlencoded”编码；

编码的库采用官方推荐的Qs，可用如下命令直接安装：

npm install qs --save

以Form提交的代码实现如下：

//  首先进行url编码
var data =  Qs.stringify({
    firstName: 'yiifaa',
    lastName: '@163.com'
});
//  提交数据
axios({
      method: 'post',
      url: '/user/12345',
      //    必不可少，修改数据的提交方式
      headers : {
          "Content-Type":'application/x-www-form-urlencoded; charset=UTF-8'
      },
      data
});

如果存在数据的级联与数组情况，假定要传输的数据如下；

{
    date : {
        startTime : '2017-07-07'
    },
    names : ['yiifaa', 'yiifee']
}

那么需要加入以下参数:

var data =  Qs.stringify({
    date : {
        startTime : '2017-07-07'
    },
    names : ['yiifaa', 'yiifee']
},
    //  加入JS对象转换配置
    {allowDots: true});

最后提交Form Data的效果如下：

date.startTime:2017-07-07
names[0]:yiifaa
names[1]:yiifee

刚好是Spring MVC要求的数据格式。

结论

利用”Content-Type”与qs库可轻松解决axios.js提交表单数据的难题，强烈建议不要轻易使用params参数，尤其是在执行POST提交时，它们之间的区别参见浏览器查询参数与表单数据的优先级问题。