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 相关文章推荐
点击广告后才能获得下载地址
Oct 26 Javascript
IE php关于强制下载文件的代码
Aug 23 Javascript
Jquery Change与bind事件代码
Sep 29 Javascript
从零学jquery之如何使用回调函数
May 16 Javascript
JS封装的自动创建表格的实现代码
Jun 15 Javascript
jQuery实现的多张图无缝滚动效果【测试可用】
Sep 12 Javascript
快速实现jQuery多级菜单效果
Feb 01 Javascript
值得分享和收藏的xmlplus组件学习教程
May 05 Javascript
利用JavaScript的%做隔行换色的实例
Nov 25 Javascript
angularJs 表格添加删除修改查询方法
Feb 27 Javascript
js比较两个单独的数组或对象是否相等的实例代码
Apr 28 Javascript
node中IO以及定时器优先级详解
May 10 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
php实现兼容2038年后Unix时间戳转换函数
2015/03/18 PHP
PHP设计模式之工厂模式与单例模式
2016/09/28 PHP
php 判断页面或图片是否经过gzip压缩的方法
2017/04/05 PHP
Mac系统完美安装PHP7详细教程
2017/06/06 PHP
Yii 2.0自带的验证码使用经验分享
2017/06/19 PHP
javascript操作cookie的文章(设置,删除cookies)
2010/04/01 Javascript
javascript 闭包疑问
2010/12/30 Javascript
seajs中模块的解析规则详解和模块使用总结
2014/03/12 Javascript
jquery选择符快速提取web表单数据示例
2014/03/27 Javascript
JQuery性能优化的几点建议
2014/05/14 Javascript
js键盘事件的keyCode
2014/07/29 Javascript
jquery 实现两Select 标签项互调示例代码
2014/09/25 Javascript
利用Angularjs实现幻灯片效果
2016/09/07 Javascript
vue axios同步请求解决方案
2017/09/29 Javascript
Vue.js 利用v-for中的index值实现隔行变色
2018/08/01 Javascript
Node爬取大批量文件的方法示例
2019/06/28 Javascript
详解微信小程序「渲染层网络层错误」的解决方法
2021/01/06 Javascript
[03:05]DOTA2英雄基础教程 嗜血狂魔
2013/12/10 DOTA
[01:57]2018DOTA2亚洲邀请赛赛前采访-iG
2018/04/03 DOTA
python读写文件操作示例程序
2013/12/02 Python
实例讲解Python中global语句下全局变量的值的修改
2016/06/16 Python
Python3.4学习笔记之常用操作符,条件分支和循环用法示例
2019/03/01 Python
Python 中PyQt5 点击主窗口弹出另一个窗口的实现方法
2019/07/04 Python
Python新手学习raise用法
2020/06/03 Python
Matplotlib 绘制饼图解决文字重叠的方法
2020/07/24 Python
python使用yaml 管理selenium元素的示例
2020/12/01 Python
简单总结CSS3中视窗单位Viewport的常见用法
2016/02/04 HTML / CSS
Html5新特性用canvas标签画多条直线附效果截图
2014/06/30 HTML / CSS
Hotels.com南非:酒店预订
2017/11/02 全球购物
Bose法国官网:购买耳机、扬声器、家庭影院、专业音响
2017/12/21 全球购物
Omio波兰:全欧洲低价大巴、火车和航班搜索和比价
2018/02/16 全球购物
国际旅客访问北美最大的汽车租赁提供商:Alamo Rent A Car
2018/06/13 全球购物
儿科护士实习自我鉴定
2013/10/17 职场文书
九大龙王魂骨,山龙王留下躯干骨,榜首死的最憋屈(被捏碎)
2022/03/18 国漫
Python+OpenCV实现在图像上绘制矩形
2022/03/21 Python