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实现: 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/800311.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【.NET全栈】ASP.NET开发web应用——ASP.NET中的样式、主题和母版页

文章目录 前言一、在ASP.NET中应用CSS样式1、创建CSS样式&#xff08;1&#xff09;内联样式&#xff08;2&#xff09;内部样式表&#xff08;3&#xff09;外部样式表 2、应用CSS样式&#xff08;1&#xff09;菜鸟教程-简单例子&#xff08;2&#xff09;菜鸟教程-用户界面&…

零售门店收银系统源码

php收银系统源码-CSDN博客文章浏览阅读268次&#xff0c;点赞6次&#xff0c;收藏4次。收银系统源码https://blog.csdn.net/qh716/article/details/140431477 1.系统开发语言 核心开发语言: PHP、HTML5、Dart后台接口: PHP7.3后合管理网站: HTML5vue2.0element-uicssjs线下收…

【区块链 + 智慧政务】涉税行政事业性收费“e 链通”项目 | FISCO BCOS应用案例

国内很多城市目前划转至税务部门征收的非税收入项目已达 17 项&#xff0c;其征管方式为行政主管部门核定后交由税务 部门征收。涉税行政事业性收费受限于传统的管理模式&#xff0c;缴费人、业务主管部门、税务部门、财政部门四方处于 相对孤立的状态&#xff0c;信息的传递靠…

校园网自动登录脚本【Windows 10】

如果要使用校园网&#xff0c;必须打开浏览器输入校园网地址&#xff0c;之后输入账号密码登录。实验室电脑绝大多数情况下应该处于联网状态&#xff0c;但不幸的是&#xff0c;我深会限制校园网客户端数量&#xff0c;一旦有新设备接入&#xff0c;很可能实验室电脑就会断网。…

实现给Nginx的指定网站开启basic认证——http基本认证

一、问题描述 目前我们配置的网站内容都是没有限制&#xff0c;可以让任何人打开浏览器都能够访问&#xff0c;这样就会存在一个问题&#xff08;可能会存在一些恶意访问的用户进行恶意操作&#xff0c;直接访问到我们的敏感后台路径进行操作&#xff0c;风险就会很大&#xff…

wps批量删除空白单元格

目录 原始数据1.按ctrlg键2.选择“空值”&#xff0c;点击“定位”3. 右击&#xff0c;删除单元格修改后的数据 原始数据 1.按ctrlg键 2.选择“空值”&#xff0c;点击“定位” 如图所示&#xff0c;空值已被选中 3. 右击&#xff0c;删除单元格 修改后的数据

数据结构—链式二叉树-C语言

代码位置&#xff1a;test-c-2024: 对C语言习题代码的练习 (gitee.com) 一、前言&#xff1a; 在现实中搜索二叉树为常用的二叉树之一&#xff0c;今天我们就要通过链表来实现搜索二叉树。实现的操作有&#xff1a;建二叉树、前序遍历、中序遍历、后序遍历、求树的节点个数、求…

AI音乐创作:一键生成,打造你的专属乐章

文章目录 &#x1f34a;AI音乐创作&#xff1a;一键生成&#xff0c;打造你的专属乐章1 市面上的AI音乐应用1.1 Suno AI1.2 网易天音 2 AI音乐创作的流程2.1 AI音乐风格/流派2.2 AI音乐的结构顺序2.3 使用KIMI生成AI音乐歌词2.4 选择AI音乐乐器2.5 书写AI音乐提示词2.5.1 方法一…

Java NIO 比传统 IO 强在哪里?

这里先给大家展示一副传统 IO 和 NIO 的对比图&#xff0c;感受一下。 传统IO基于字节流或字符流&#xff08;如 FileInputStream、BufferedReader 等&#xff09;进行文件读写&#xff0c;以及使用Socket和ServerSocketChannel进行网络传输。 NIO 使通道&#xff08;Channel&a…

【过题笔记】 7.15

Array Without Local Maximums 算法&#xff1a;动态规划 简要思路&#xff1a; 考虑左边的数跟当前位置的关系&#xff0c;不难想到只有三种情况&#xff1a;大于&#xff0c;小于&#xff0c;等于。 于是可以得到状态 f [ i ] [ j ] [ 0 / 1 / 2 ] f[i][j][0/1/2] f[i][j][…

ubuntu22.04安装SecureCRT8.7.3,完成顺利使用

材料准备 scrt-sfx安装包 &#xff0c; securecrt_linux_crack.pl 补丁脚本&#xff0c;和两个依赖库 其中securecrt_linux_crack.pl是找的专门适合 8.7.3版本的&#xff0c;网上很多版本的crack.pl只能打补丁以前的老版本。 而更老版本的SecureCRT对ubuntu22支持更不好&#…

数据库使用SSL加密连接

简介 数据库开通SSL加密连接是确保数据传输过程中安全性的关键措施&#xff0c;它通过加密数据、验证服务器身份、保护敏感信息、维护数据完整性和可靠性&#xff0c;同时满足行业标准和法规要求&#xff0c;进而提升用户体验和信任度&#xff0c;为企业的数据安全和业务连续性…

HTML5+CSS3小实例:纯CSS实现奥运五环

实例:纯CSS实现奥运五环 技术栈:HTML+CSS 效果: 源码: 【HTML】 <!DOCTYPE html> <html lang="zh-CN"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-sca…

1.CATIA:CAA调用Excel接口

生成调用Excel的头文件 参考如下进行excel头文件的生成: 如何使用vs2022通过excel.exe生成VC、C++能够使用的头文件 添加如下的接口: #include "CApplication.h" #include "CWorkbook.h" #include "CWorkbooks.h" #include "CWorkshee…

AMD software 将两个显示器合并为一个超宽显示器

最近玩游戏的时候&#xff0c;发现了一个骚操作。 可以将两个显示器&#xff08;更多个的自己去试&#xff0c;不知道&#xff09;组合为一个显示器&#xff0c;注意&#xff0c;这里说的不是将两个显示都连接电脑从而使用双屏显示器&#xff0c; 而是 将两个显示器组合为一个…

实验一:图像信号的数字化

目录 一、实验目的 二、实验原理 三、实验内容 四、源程序及结果 源程序&#xff08;python&#xff09;&#xff1a; 结果&#xff1a; 五、结果分析 一、实验目的 通过本实验了解图像的数字化过程&#xff0c;了解数字图像的数据矩阵表示法。掌握取样&#xff08;象素个…

利用AI辅助制作ppt封面

如何利用AI辅助制作一个炫酷的PPT封面 标题使用镂空字背景替换为动态视频 标题使用镂空字 1.首先&#xff0c;新建一个空白的ppt页面&#xff0c;插入一张你认为符合主题的图片&#xff0c;占满整个可视页面。 2.其次&#xff0c;插入一个矩形&#xff0c;右键选择设置形状格式…

uniapp-vue3-vite 搭建小程序、H5 项目模板

uniapp-vue3-vite 搭建小程序、H5 项目模板 特色准备拉取默认UniApp模板安装依赖启动项目测试结果 配置自动化导入安装依赖在vite.config.js中配置 引入 prerttier eslint stylelint.editorconfig.prettierrc.cjs.eslintrc.cjs.stylelintrc.cjs 引入 husky lint-staged com…

2024Datawhale AI夏令营---基于术语词典干预的机器翻译挑战赛--学习笔记

#Datawhale #NLP 1.背景介绍&#xff1a; 机器翻译&#xff08;Machine Translation&#xff0c;简称MT&#xff09;是自然语言处理领域的一个重要分支&#xff0c;其目标是将一种语言的文本自动转换为另一种语言的文本。机器翻译的发展可以追溯到20世纪50年代&#xff0c;经历…

springboot 适配ARM 架构

下载对应的maven https://hub.docker.com/_/maven/tags?page&page_size&ordering&name3.5.3-alpinedocker pull maven:3.5.3-alpinesha256:4c4e266aacf8ea6976b52df8467134b9f628cfed347c2f6aaf9e6aff832f7c45 2、下载对应的jdk https://hub.docker.com/_/o…