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 相关文章推荐
javascript简单实现图片预加载
Dec 03 Javascript
JQuery调用绑定click事件的3种写法
Mar 28 Javascript
JavaScript实现点击自动选择TextArea文本的方法
Jul 02 Javascript
JS实现网站菜单拖拽移位效果的方法
Sep 24 Javascript
jQuery获取元素父节点的方法
Jun 21 Javascript
AngularJS中$watch和$timeout的使用示例
Sep 20 Javascript
javascript滚轮控制模拟滚动条
Oct 19 Javascript
js addDqmForPP给标签内属性值加上双引号的函数
Dec 24 Javascript
js实现返回顶部效果
Mar 10 Javascript
Vue实现简易翻页效果源码分享
Nov 08 Javascript
利用JS代码自动删除稿件的普通弹幕功能
Sep 20 Javascript
使用Vue实现调用接口加载页面初始数据
Oct 28 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
php+mysql实现无限分类实例详解
2015/01/15 PHP
PHP基于进程控制函数实现多线程
2020/12/09 PHP
从面试题学习Javascript 面向对象(创建对象)
2012/03/30 Javascript
js修改input的type属性及浏览器兼容问题探讨与解决
2013/01/23 Javascript
在表单提交前进行验证的几种方式整理
2013/07/31 Javascript
js function定义函数的几种不错方法
2014/02/27 Javascript
推荐 21 款优秀的高性能 Node.js 开发框架
2014/08/18 Javascript
BootStrap学习系列之Bootstrap Typeahead 组件实现百度下拉效果(续)
2016/07/07 Javascript
jQuery操作cookie
2016/08/08 Javascript
基于JavaScript实现自定义滚动条
2017/01/25 Javascript
jQuery.Form上传文件操作
2017/02/05 Javascript
详解Vue2.X的路由管理记录之 钩子函数(切割流水线)
2017/05/02 Javascript
详解AngularJS controller调用factory
2017/05/19 Javascript
zTree获取当前节点的下一级子节点数实例
2017/09/05 Javascript
vue.js $refs和$emit 父子组件交互的方法
2017/12/20 Javascript
JS中获取 DOM 元素的绝对位置实例详解
2018/04/23 Javascript
vue 使用高德地图vue-amap组件过程解析
2019/09/07 Javascript
浅谈layui 数据表格前后台传值的问题
2019/09/12 Javascript
JS随机密码生成算法
2019/09/23 Javascript
微信小程序实现上传多张图片、删除图片
2020/07/29 Javascript
javascript实现点击按钮切换轮播图功能
2020/09/23 Javascript
详解在Python程序中自定义异常的方法
2015/10/16 Python
对Python3中的input函数详解
2018/04/22 Python
对python多线程与global变量详解
2018/11/09 Python
利用Python检测URL状态
2019/07/31 Python
django 使用 PIL 压缩图片的例子
2019/08/16 Python
Python爬取腾讯视频评论的思路详解
2019/12/19 Python
pycharm配置QtDesigner的超详细方法
2021/01/25 Python
CSS3中的content属性使用示例
2015/07/20 HTML / CSS
html5 canvas 画图教程案例分析
2012/11/23 HTML / CSS
车祸赔偿收入证明
2014/01/09 职场文书
留学经费担保书
2014/05/12 职场文书
2014年度安全生产目标管理责任书
2014/07/25 职场文书
学习雷锋精神活动总结
2015/02/06 职场文书
人与自然的观后感
2015/06/18 职场文书
《卧薪尝胆》读后感3篇
2019/12/26 职场文书