axios异步提交表单数据的几种方法


Posted in Javascript onAugust 11, 2019

踩坑Axios提交form表单几种格式

前后端分离的开发前后端, 前端使用的vue,后端的安全模块使用的SpringSecurity,使用postman测试后端的权限接口时发现都正常,但是使用vue+axios发送异步的请求后端一直获取不出axios提交的form表单的数据,爬坑两个半钟头找到了答案

axios用post异步形式提交的数据和我们直接使用from表单提交的数据的格式(Form Data格式)是不一样的,在下面列举

默认格式Request Payload

直接使用axios发送异步请求,没任何处理的代码如下:

const service = axios.create({})

doLogin (pojo) {
 return request({
  url: '/api/user/login',
  method: 'post',
  data: pojo
 })

这种方式提交的表单格式是默认是RequestPayload, 它的长下面这个样子

axios异步提交表单数据的几种方法

可以看到,它的Contet-type是 "Content-Type": "application/json;"
但是后台的SpringSecurity对这种结果可不买单,在Request中解析不出任何数据来

处理成Form Data格式

使用插件qs, 安装命令如下:

npm install --save qs

请求编码:

const service = axios.create({})

 doLogin (pojo) {
 return request({
  url: '/api/user/login',
  method: 'post',
  data: qs.stringify(pojo)
 })
 }
 
 或者
 
 doLogin (pojo) {
 return request({
  url: '/api/user/login',
  method: 'post',
  data: pojo ,
  transformRequest: [function (data) {
  data = qs.stringify(data);
  return data;
  }],
 })
 }

经过这样处理的表单数据长成下面的这样, 这也是我们最常用的Form Data格式,这种格式的数据可以从后台的HttpRequest中把提交的属性解析出来

axios异步提交表单数据的几种方法

其他类型的Content-Type对应的表单数据格式

const service = axios.create({
 headers: {
  "Content-Type": "multipart/form-data; charset=utf-8;"
  }
})

 doLogin (pojo) {
 return request({
  url: '/api/user/login',
  method: 'post',
  data: qs.stringify(pojo)
  })
 }

它长这样

axios异步提交表单数据的几种方法

const service = axios.create({
 headers: {
  "Content-Type": "multipart/form-data; charset=utf-8;"
  }
})

 doLogin (pojo) {
 return request({
  url: '/api/user/login',
  method: 'post',
  data: pojo
  })
 }
---

axios异步提交表单数据的几种方法

const service = axios.create({
 headers: {
  "Content-Type": "multipart/form-data; charset=utf-8;"
  }
})

 doLogin (pojo) {
 return request({
  url: '/api/user/login',
  method: 'post',
  data:pojo
  })
 }

axios异步提交表单数据的几种方法

const service = axios.create({
 headers: {
  "Content-Type": "application/x-www-form-urlencoded; charset=utf-8;"
 }
})

 doLogin (pojo) {
 return request({
  url: '/api/user/login',
  method: 'post',
  data: qs.stringify(pojo)
 })
 }

axios异步提交表单数据的几种方法

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
(currentStyle)javascript为何有时用style得不到已设定的CSS的属性
Aug 15 Javascript
javascript实现的在当前窗口中漂浮框的代码
Mar 15 Javascript
jquery 圆形旋转图片滚动切换效果
Jan 19 Javascript
JS实现清除指定cookies的方法
Sep 20 Javascript
js跨域问题浅析及解决方法优缺点对比
Nov 08 Javascript
JS简单操作select和dropdownlist实例
Nov 26 Javascript
js实现点击图片将图片地址复制到粘贴板的方法
Feb 16 Javascript
kindeditor编辑器点中图片滚动条往上顶的bug
Jul 05 Javascript
AngularJS应用开发思维之依赖注入3
Aug 19 Javascript
JavaScript实现QQ列表展开收缩扩展功能
Oct 30 Javascript
vue实现的上传图片到数据库并显示到页面功能示例
Mar 17 Javascript
原生JS实现前端本地文件上传
Sep 08 Javascript
node.js实现带进度条的多文件上传
Mar 27 #Javascript
基于Express框架使用POST传递Form数据
Aug 10 #Javascript
Vue实现点击显示不同图片的效果
Aug 10 #Javascript
vue+eslint+vscode配置教程
Aug 09 #Javascript
一个手写的vue放大镜效果
Aug 09 #Javascript
详解Vue-cli3.X使用px2rem遇到的问题
Aug 09 #Javascript
微信小程序引入模块中wxml、wxss、js的方法示例
Aug 09 #Javascript
You might like
提问的智慧(2)
2006/10/09 PHP
解析strtr函数的效率问题
2013/06/26 PHP
php操作mysql数据库的基本类代码
2014/02/25 PHP
php的array数组和使用实例简明教程(容易理解)
2014/03/20 PHP
神盾加密解密教程(三)PHP 神盾解密工具
2014/06/08 PHP
采用ThinkPHP中F方法实现快速缓存实例
2014/06/13 PHP
Discuz7.2版的faq.php SQL注入漏洞分析
2014/08/06 PHP
微信API接口大全
2015/04/15 PHP
PHP多维数组指定多字段排序的示例代码
2018/05/16 PHP
用JS剩余字数计算的代码
2008/07/03 Javascript
jQuery ReferenceError: $ is not defined 错误的处理办法
2013/05/10 Javascript
JavaScript使用二分查找算法在数组中查找数据的方法
2015/04/07 Javascript
基于dropdown.js实现的两款美观大气的二级导航菜单
2015/09/02 Javascript
浅析JavaScript访问对象属性和方法及区别
2015/11/16 Javascript
解决vue-cli中stylus无法使用的问题方法
2017/06/19 Javascript
JS 60秒后重新发送验证码的实例讲解
2017/07/26 Javascript
AngularJS实现表单验证功能详解
2017/10/12 Javascript
[15:58]DOTA2国际邀请赛采访专栏:Tongfu.Sansheng&KingJ,DK.rOtk
2013/08/08 DOTA
Python函数中定义参数的四种方式
2014/11/30 Python
在Python下使用Txt2Html实现网页过滤代理的教程
2015/04/11 Python
python利用正则表达式排除集合中字符的功能示例
2017/10/10 Python
python使用KNN算法手写体识别
2018/02/01 Python
浅析Python 读取图像文件的性能对比
2019/03/07 Python
Python实现截取PDF文件中的几页代码实例
2019/03/11 Python
解决django服务器重启端口被占用的问题
2019/07/26 Python
HTML5 canvas基本绘图之绘制线段
2016/06/27 HTML / CSS
简述安装Slackware Linux系统的过程
2012/05/08 面试题
酒店公关部经理岗位职责
2013/11/24 职场文书
计算机通信专业推荐信
2014/02/22 职场文书
火箭队口号
2014/06/18 职场文书
工商局局长个人对照检查材料思想汇报
2014/09/23 职场文书
婚内房产协议书范本
2014/10/02 职场文书
购房协议书范本(无房产证)
2014/10/07 职场文书
2015年宣传部个人工作总结
2015/05/14 职场文书
少年雷锋观后感
2015/06/10 职场文书
导游词之山西祁县乔家大院
2019/10/14 职场文书