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
- 1
以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});
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
如果存在数据的级联与数组情况，假定要传输的数据如下；
{ date : { startTime : '2017-07-07' }, names : ['yiifaa', 'yiifee']}
- 1
- 2
- 3
- 4
- 5
- 6
那么需要加入以下参数:
var data = Qs.stringify({ date : { startTime : '2017-07-07' }, names : ['yiifaa', 'yiifee']}, // 加入JS对象转换配置 {allowDots: true});
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
最后提交Form Data的效果如下：
date.startTime:2017-07-07names[0]:yiifaanames[1]:yiifee
- 1
- 2
- 3
刚好是Spring MVC要求的数据格式。
结论
利用”Content-Type”与qs库可轻松解决axios.js提交表单数据的难题，强烈建议不要轻易使用params参数，尤其是在执行POST提交时，它们之间的区别参见浏览器查询参数与表单数据的优先级问题。