当前位置: 首页 > news >正文

axios以post方式提交表单形式数据

某些后端框架请求接口必须走form表单提交的那种形式,但前端很少有<form action="接口地址" method="post"></form>这种写法去提交表单数据,所以前端需要用axios模拟一个表单提交接口。

Content-Type 代表发送端(客户端/服务器)发送的实体数据的数据类型。

一般,前端会在axios做拦截的时候默认设置:Axios.defaults.headers['Content-Type'] = "application/json",这时要发送浏览器的原生 form 表单形式的数据时,就会有问题。

解决方法:

最主要的一点是要设置Content-Type:浏览器的原生 form 表单

Axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded'

此时方法中传递的参数会有问题,需要用qs.stringify包一下,需要引入qs,params = qs.stringify(params)即可。

以上操作的文件是axios公共的拦截文件,所以不应该直接修改Axios.defaults.headers['Content-Type'],这样会影响其他使用axios的方法,这时,可以对axios进行封装,通过具体的方法传不同的’Content-Type’来满足不同的需求。

axios POST提交数据的三种请求方式写法:

1、Content-Type: application/json

application/json 这个Content-Type作为响应头大家肯定不陌生。实际上,现在越来越多的人把它作为请求头,用来告诉服务端消息主体是序列化后的JSON字符串。由于JSON规范的流行,除了低版本IE之外的各大浏览器都原生支持JSON.stringify,服务端语言也都有处理JSON的函数,使用JSON不会遇上什么麻烦。

import axios from 'axios'
let data = {"code":"123","name":"test"};axios.post(url,data)
.then(res=>{console.log('res=>',res);            
})

 

通过Postman实现:

2、Content-Type: multipart/form-data

这也是一个常见的POST数据提交的方式,表示在发送前不对数据进行编码,这种方式一般出现在通过form表单上传文件的场景中,在HTML的form标签中通过设置属性enctype=multipart/form-data来表示通过这种方式提交数据。这种POST数据的方式是浏览器原生支持的。各大服务端语言对它也有着良好的支持。

import axios from 'axios';let data = new FormData();
data.append('code', 'abc');
data.append('name', 'test');axios.post(url, data)
.then(res=>{console.log('res=>',res);            
})

 

通过Postman实现: 

3、Content-Type: application/x-www-form-urlencoded

这应该是最常见的POST提交数据的方式了。浏览器的原生form表单,如果不设置 enctype属性,那么最终就会默认以application/x-www-form-urlencoded方式提交数据。这种情况下请求头的Content-Type被设置成application/x-www-form-urlencoded,提交的数据按照 key1=value1&key2=value2的方式进行编码,key和value都进行了URL转码。大部分服务端语言都对这种方式有很好的支持。很多时候,我们用Ajax提交数据时,也是使用这种方式。

import axios from 'axios'
import qs from 'qs'
let data = {"code":"123", "name":"test"};axios.post(url, qs.stringify({data
}))
.then(res=>{console.log('res=>',res);            
})

 

通过Postman实现: 

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • 音频解码器音乐播放器
  • 简述MySQL主从复制原理和机制
  • Android 使用FFmpeg解析RTSP流,ANativeWindow渲染 使用SurfaceView播放流程详解
  • Java二十三种设计模式-工厂方法模式(2/23)
  • 使用IDEA编写lua脚本并运行
  • Harmony 状态管理 @Local 和 @Param
  • 深入理解TCP/IP协议:三次握手与四次挥手
  • WebRTC音视频-前言介绍
  • 海外媒体发稿-瑞典SEO破茧成蝶:从0到10的实战精要-大舍传媒
  • windows edge自带的pdf分割工具(功能)
  • 设计模式--外观模式
  • Leetcode1929. 数组串联
  • 《基于 Kafka + Quartz 实现时限质控方案》
  • Hive修改表中的某个值
  • 神经网络之多层感知机
  • [ 一起学React系列 -- 8 ] React中的文件上传
  • 【347天】每日项目总结系列085(2018.01.18)
  • co.js - 让异步代码同步化
  • Java的Interrupt与线程中断
  • jquery cookie
  • REST架构的思考
  • 不用申请服务号就可以开发微信支付/支付宝/QQ钱包支付!附:直接可用的代码+demo...
  • 将 Measurements 和 Units 应用到物理学
  • 精彩代码 vue.js
  • 容器服务kubernetes弹性伸缩高级用法
  • 如何抓住下一波零售风口?看RPA玩转零售自动化
  • 数组的操作
  • 算法---两个栈实现一个队列
  • 一起来学SpringBoot | 第三篇:SpringBoot日志配置
  • 【运维趟坑回忆录 开篇】初入初创, 一脸懵
  • ​RecSys 2022 | 面向人岗匹配的双向选择偏好建模
  • ‌‌雅诗兰黛、‌‌兰蔻等美妆大品牌的营销策略是什么?
  • # windows 运行框输入mrt提示错误:Windows 找不到文件‘mrt‘。请确定文件名是否正确后,再试一次
  • $(function(){})与(function($){....})(jQuery)的区别
  • (2.2w字)前端单元测试之Jest详解篇
  • (PWM呼吸灯)合泰开发板HT66F2390-----点灯大师
  • (第9篇)大数据的的超级应用——数据挖掘-推荐系统
  • (十五)devops持续集成开发——jenkins流水线构建策略配置及触发器的使用
  • (四)React组件、useState、组件样式
  • (原創) 如何安裝Linux版本的Quartus II? (SOC) (Quartus II) (Linux) (RedHat) (VirtualBox)
  • (转)VC++中ondraw在什么时候调用的
  • **Java有哪些悲观锁的实现_乐观锁、悲观锁、Redis分布式锁和Zookeeper分布式锁的实现以及流程原理...
  • .bat批处理(二):%0 %1——给批处理脚本传递参数
  • .form文件_一篇文章学会文件上传
  • .NET HttpWebRequest、WebClient、HttpClient
  • .net oracle 连接超时_Mysql连接数据库异常汇总【必收藏】
  • .net生成的类,跨工程调用显示注释
  • .NET值类型变量“活”在哪?
  • /etc/apt/sources.list 和 /etc/apt/sources.list.d
  • @Tag和@Operation标签失效问题。SpringDoc 2.2.0(OpenApi 3)和Spring Boot 3.1.1集成
  • @vue/cli脚手架
  • [ 蓝桥杯Web真题 ]-Markdown 文档解析
  • [1127]图形打印 sdutOJ
  • [ACM独立出版]2024年虚拟现实、图像和信号处理国际学术会议(ICVISP 2024)
  • [AIGC 大数据基础]hive浅谈