首先给大家分享一个巨牛巨牛的人工智能教程,是我无意中发现的。教程不仅零基础,通俗易懂,而且非常风趣幽默,还时不时有内涵段子,像看小说一样,哈哈~我正在学习中,觉得太牛了,所以分享给大家!点这里可以跳转到教程
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提交时,它们之间的区别参见浏览器查询参数与表单数据的优先级问题。