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 相关文章推荐
[原创]js获取数组任意个不重复的随机数组元素
Mar 15 Javascript
jquery实现metro效果示例代码
Sep 06 Javascript
jquery获取元素索引值index()示例
Feb 13 Javascript
javascript获取浏览器类型和版本的方法(js获取浏览器版本)
Mar 13 Javascript
微信公众号开发 实现点击返回按钮就返回到聊天界面
Dec 15 Javascript
深入理解Vue transition源码分析
Jul 30 Javascript
基于匀速运动的实例讲解(侧边栏,淡入淡出)
Oct 17 Javascript
纯html+css+javascript实现楼层跳跃式的页面布局(实例代码)
Oct 25 Javascript
基于 Vue.js 之 iView UI 框架非工程化实践记录(推荐)
Nov 21 Javascript
Angular实现的进度条功能示例
Feb 18 Javascript
layui form.render('select', 'test2') 更新渲染的方法
Sep 27 Javascript
vue Treeselect下拉树只能选择第N级元素实现代码
Aug 31 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
从Web查询数据库之PHP与MySQL篇
2009/09/25 PHP
ThinkPHP采用模块和操作分析
2011/04/18 PHP
PHP高自定义性安全验证码代码
2011/11/27 PHP
php 注释规范
2012/03/29 PHP
PHP中Session和Cookie是如何操作的
2015/10/10 PHP
解决表单中第一个非隐藏的元素获得焦点的一个方案
2009/10/26 Javascript
js限制textarea每行输入字符串长度的代码
2012/10/31 Javascript
js捕获鼠标右键菜单中的粘帖事件实现代码
2013/04/01 Javascript
js 编码转换 gb2312 和 utf8 互转的2种方法
2013/08/07 Javascript
Jquery遍历checkbox获取选中项value值的方法
2014/02/13 Javascript
JavaScript格式化日期时间的方法和自定义格式化函数示例
2014/04/04 Javascript
教你如何在 Javascript 文件里使用 .Net MVC Razor 语法
2014/07/23 Javascript
JS实现浏览器状态栏文字从右向左弹出效果代码
2015/10/27 Javascript
JS hashMap实例详解
2016/05/26 Javascript
Angular 2.x学习教程之结构指令详解
2017/05/25 Javascript
layui实现下拉复选功能的例子(包括数据的回显与上传)
2019/09/24 Javascript
微信小程序实现限制用户转发功能的实例代码
2020/02/22 Javascript
VUE项目实现主题切换的多种方法
2020/11/26 Vue.js
Eclipse和PyDev搭建完美Python开发环境教程(Windows篇)
2016/11/16 Python
python django 实现验证码的功能实例代码
2017/05/18 Python
Python-ElasticSearch搜索查询的讲解
2019/02/25 Python
python实现关闭第三方窗口的方法
2019/06/28 Python
python如何使用socketserver模块实现并发聊天
2019/12/14 Python
删除pycharm鼠标右键快捷键打开项目的操作
2021/01/16 Python
使用HTML5和CSS3表单验证功能
2017/05/05 HTML / CSS
css3设置box-pack和box-align让div里面的元素垂直居中
2014/09/01 HTML / CSS
轻松掌握CSS3中的字体大小单位rem的使用方法
2016/05/24 HTML / CSS
探索欧洲最好的品牌:Bombinate
2019/06/14 全球购物
中软国际Java程序员笔试题
2014/07/19 面试题
高校毕业生自我鉴定
2013/10/27 职场文书
中专毕业生个人职业生涯规划
2014/02/19 职场文书
人力资源经理的岗位职责
2014/03/02 职场文书
同意报考证明
2015/06/17 职场文书
婚礼男方父母答谢词
2015/09/29 职场文书
Python OpenCV超详细讲解基本功能
2022/04/02 Python
i7 6700处理器相当于i5几代
2022/04/19 数码科技