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 相关文章推荐
jQuery第三课 修改元素属性及内容的代码
Mar 14 Javascript
JS判断不能为空实例代码
Nov 26 Javascript
JS实现鼠标点击展开或隐藏表格行的方法
Mar 03 Javascript
jQuery寻找n以内完全数的方法
Jun 24 Javascript
jQuery网页版打砖块小游戏源码分享
Aug 20 Javascript
详解JavaScript编程中正则表达式的使用
Oct 25 Javascript
JQuery Mobile实现导航栏和页脚
Mar 09 Javascript
工厂模式在JS中的实践
Jan 18 Javascript
详解vue-meta如何让你更优雅的管理头部标签
Jan 18 Javascript
vue使用better-scroll实现下拉刷新、上拉加载
Nov 23 Javascript
使用JS判断页面是首次被加载还是刷新
May 26 Javascript
vue+echarts+datav大屏数据展示及实现中国地图省市县下钻功能
Nov 16 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
图书管理程序(二)
2006/10/09 PHP
Win2003下APACHE+PHP5+MYSQL4+PHPMYADMIN 的简易安装配置
2006/11/18 PHP
如何通过Apache在本地配置多个虚拟主机
2020/07/29 PHP
Nigma vs Liquid BO3 第二场2.13
2021/03/10 DOTA
论坛特效代码收集(落伍转发-不错)
2006/12/02 Javascript
JSON.parse 解析字符串出错的解决方法
2010/07/08 Javascript
用Jquery实现多级下拉框无刷新的联动
2010/12/22 Javascript
js类型转换与引用类型详解(Boolean_Number_String)
2014/03/07 Javascript
用jQuery toggleClass 实现鼠标移上变色
2014/05/14 Javascript
JavaScript中对循环语句的优化技巧深入探讨
2014/06/06 Javascript
JS中使用变量保存arguments对象的方法
2016/06/03 Javascript
jquery datatable服务端分页
2016/08/31 Javascript
React Router基础使用
2017/01/17 Javascript
js数组常用最重要的方法
2018/02/04 Javascript
layui table 表格上添加日期控件的两种方法
2019/09/28 Javascript
微信小程序修改checkbox的样式代码实例
2020/01/21 Javascript
javascript实现京东登录显示隐藏密码
2020/08/02 Javascript
在react-antd中弹出层form内容传递给父组件的操作
2020/10/24 Javascript
[04:36]DOTA2国际邀请赛 ti3精彩集锦
2013/08/19 DOTA
python使用rabbitmq实现网络爬虫示例
2014/02/20 Python
Python实现拷贝多个文件到同一目录的方法
2016/09/19 Python
python文件选择对话框的操作方法
2019/06/27 Python
详解Django配置优化方法
2019/11/18 Python
python实现的分析并统计nginx日志数据功能示例
2019/12/21 Python
jupyter notebook 参数传递给shell命令行实例
2020/04/10 Python
解决python虚拟环境切换无效的问题
2020/04/30 Python
pycharm 实现复制一行的快捷键
2021/01/15 Python
html5 跨文档消息传输示例探讨
2013/04/01 HTML / CSS
介绍java中初始化块的使用
2012/09/11 面试题
幼儿园教师自我鉴定
2014/03/20 职场文书
安全责任书怎么写
2014/07/28 职场文书
工作年限证明模板
2014/11/01 职场文书
先进工作者申报材料
2014/12/23 职场文书
2015年服务员个人工作总结
2015/05/27 职场文书
投诉信格式范文
2015/07/02 职场文书
2019毕业论文致谢词
2019/06/24 职场文书