axios异步提交表单数据的几种方法

 更新时间:2019-08-11 12:02:00   作者:佚名   我要评论(0)

踩坑Axios提交form表单几种格式
前后端分离的开发前后端, 前端使用的vue,后端的安全模块使用的SpringSecurity,使用postman测试后端的权限接口时发现都正常,但

踩坑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, 它的长下面这个样子

可以看到,它的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中把提交的属性解析出来

其他类型的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)
  })
 }

它长这样

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
  })
 }
---

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
  })
 }

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)
 })
 }

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对脚本之家的支持。

您可能感兴趣的文章:

  • vue异步axios获取的数据渲染到页面的方法
  • 在vue中通过axios异步使用echarts的方法
  • vuejs使用axios异步访问时用get和post的实例讲解
  • 解决vue跨域axios异步通信问题
  • Vue axios 中提交表单数据(含上传文件)
  • axios发送post请求,提交图片类型表单数据方法
  • vue axios 表单提交上传图片的实例
  • 让axios发送表单请求形式的键值对post数据的实例

相关文章

  • axios异步提交表单数据的几种方法

    axios异步提交表单数据的几种方法

    踩坑Axios提交form表单几种格式 前后端分离的开发前后端, 前端使用的vue,后端的安全模块使用的SpringSecurity,使用postman测试后端的权限接口时发现都正常,但
    2019-08-11
  • Java中泛型使用的简单方法介绍

    Java中泛型使用的简单方法介绍

    一. 泛型是什么 “泛型”,顾名思义,“泛指的类型”。我们提供了泛指的概念,但具体执行的时候却可以有具体的规则来约束,比如我们用的非常多的ArrayList
    2019-08-11
  • 浅谈javascript错误处理

    浅谈javascript错误处理

    当 JavaScript 引擎执行 JavaScript 代码时,会发生各种错误:可能是语法错误,通常是程序员造成的编码错误或错别字;可能是拼写错误或语言中缺少的功能(可能
    2019-08-11
  • SpringBoot如何优雅地处理全局异常详解

    SpringBoot如何优雅地处理全局异常详解

    前言 之前用springboot的时候,只知道捕获异常使用try{}catch,一个接口一个try{}catch,这也是大多数开发人员异常处理的常用方式,虽然屡试不爽,但会造成一
    2019-08-11
  • thinkPHP和onethink微信支付插件分享

    thinkPHP和onethink微信支付插件分享

    thinkPHP和微支付实现的微信支付插件,在微信中调用微信jssdk实现支付,分享给大家参考下 //实现的Wxpay钩子方法 public function Wxpay($param){
    2019-08-11
  • Angular8基础应用之表单及其验证

    Angular8基础应用之表单及其验证

    一、前提 必要性:特别必要 意义:很有意义 二、正文 (一)、新建表单(模板表单) 1、新建名称为formValidator的ng项目——命令行输入ng new form
    2019-08-11
  • PHP利用DWZ.CN服务生成短网址

    PHP利用DWZ.CN服务生成短网址

    使用DWZ.CN生成短网址 <&#63;php /** * FunctionHelper */ class FunctionHelper { // ----------------------------------------------------------
    2019-08-11
  • C#并发实战记录之Parallel.ForEach使用

    C#并发实战记录之Parallel.ForEach使用

    前言: 最近给客户开发一个伙食费计算系统,大概需要计算2000个人的伙食。需求是按照员工的预定报餐计划对消费记录进行检查,如有未报餐有刷卡或者有报餐没刷
    2019-08-11
  • Nginx代理axios请求以及注意事项详解

    Nginx代理axios请求以及注意事项详解

    前言 近期写个小demo,因为用到某大厂的在线数据,接口做了跨域限制,所以利用Nginx代理来解决这些问题。 1. nginx.conf 配置信息 由于nginx.conf配置信
    2019-08-11
  • 简单谈谈MySQL数据透视表

    简单谈谈MySQL数据透视表

    我有一张这样的产品零件表: 部分 part_id part_type product_id -------------------------------------- 1 A 1 2 B 1 3
    2019-08-11

最新评论