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 相关文章推荐
PNGHandler-借助JS让PNG图在IE下实现透明(包括背景图)
Aug 31 Javascript
不同浏览器对回车提交表单的处理办法
Feb 13 Javascript
js动态修改input输入框的type属性(实现方法解析)
Nov 13 Javascript
jQuery图片切换插件jquery.cycle.js使用示例
Jun 16 Javascript
js制作简易年历完整实例
Jan 28 Javascript
jquery实现点击label的同时触发文本框点击事件的方法
Jun 05 Javascript
jquery中ready()函数执行的时机和window的load事件比较
Jun 22 Javascript
node.js实现端口转发
Apr 14 Javascript
jquery 判断是否支持Placeholder属性的方法
Feb 07 Javascript
JS设置时间无效问题的解决办法
Feb 18 Javascript
浅谈Vue网络请求之interceptors实际应用
Feb 28 Javascript
原生JS实现手动轮播图效果实例代码
Nov 22 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
火影忍者:三大瞳力之一的白眼,为什么没有写轮眼那么出色?
2020/03/02 日漫
DW中链接mysql数据库时,建立字符集中文出现乱码的解决方法
2010/03/27 PHP
php allow_url_include的应用和解释
2010/04/22 PHP
php中apc缓存使用示例
2013/12/25 PHP
ThinkPHP中的关联模型注意点
2014/06/16 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(七)
2014/06/23 PHP
Laravel中日期时间处理包Carbon的简单使用
2017/09/21 PHP
在TP5数据库中四个字段实现无限分类的示例
2019/10/18 PHP
php实现统计IP数及在线人数的示例代码
2020/07/22 PHP
两个JavaScript jsFiddle JSBin在线调试器
2010/03/14 Javascript
一款Jquery 分页插件的改造方法(服务器端分页)
2011/07/11 Javascript
面向对象Javascript核心支持代码分享
2012/05/23 Javascript
分享精心挑选的23款美轮美奂的jQuery 图片特效插件
2012/08/14 Javascript
Node.js中child_process实现多进程
2015/02/03 Javascript
jQuery动态添加及删除表单上传元素的方法(附demo源码下载)
2016/01/15 Javascript
Angular 中 select指令用法详解
2016/09/29 Javascript
微信小程序 地图定位简单实例
2016/10/14 Javascript
浅析Node.js:DNS模块的使用
2016/11/23 Javascript
Vue数组更新及过滤排序功能
2017/08/10 Javascript
ES6基础之数组和对象的拓展实例详解
2019/08/22 Javascript
Vue Cli3 打包配置并自动忽略console.log语句的方法
2020/04/23 Javascript
vue脚手架项目创建步骤详解
2021/03/02 Vue.js
仅利用30行Python代码来展示X算法
2015/04/01 Python
Python利用ansible分发处理任务
2015/08/04 Python
初探TensorFLow从文件读取图片的四种方式
2018/02/06 Python
python使用matplotlib画柱状图、散点图
2019/03/18 Python
python文字转语音的实例代码分析
2019/11/12 Python
使用Keras画神经网络准确性图教程
2020/06/15 Python
Python classmethod装饰器原理及用法解析
2020/10/17 Python
详解CSS3中字体平滑处理和抗锯齿渲染
2017/03/29 HTML / CSS
可口可乐唇膏:Lip Smackers
2019/08/27 全球购物
班主任新年寄语
2014/04/04 职场文书
最美护士演讲稿
2014/08/27 职场文书
李白经典诗之一:全文无一“月”字,却句句有月
2019/07/12 职场文书
Java常用工具类汇总 附示例代码
2021/06/26 Java/Android
第四次工业革命,打工人与机器人的竞争
2022/04/21 数码科技