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

news2024/11/13 15:21:47

某些后端框架请求接口必须走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实现: 

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【Unity学习笔记】第二十 · 物理引擎脉络梳理(数值积分、碰撞检测、约束解决)

转载请注明出处: https://blog.csdn.net/weixin_44013533/article/details/139808452 作者&#xff1a;CSDN|Ringleader| 物理引擎综述 物理引擎是利用物理规则模拟物体运动和碰撞的模块&#xff0c;以在重力、弹力、摩擦力等各种力作用下做出真实运动表现&#xff0c;并对碰…

实现将Nginx的每个网站配置单独的nginx配置文件——每个网站单独管理

一、问题描述 Nginx默认地配置文件【nginx.conf】是包含了所有网站的配置内容,如果我们需要配置很多网站的话,就需要在默认的配置文件中给每个网站都添加一条server记录,这样下去nginx默认配置文件会变得很大,很难管理(比如有些网站不使用了,需要注销掉,也需要到该文件操…

YOLOv8白皮书-第Y7周:训练自己的数据集

本文为365天深度学习训练营中的学习记录博客 原作者&#xff1a;K同学啊|接辅导、项目定制 本文可以参考《YOLOv5白皮书-第Y2周:训练自己的数据集》 这次试着用YOLOv8训练自己的数据。 一、配置环境 1、官网下载源码 官网地址:【YOLOv8开源地址】 2、安装需要的环境 配置P…

快捷工具(提升工作效率)

文章目录 一、notepad++设置转json1.下载插件二、截图工具(可以将截图并粘贴到窗口)1.下载安装软件:snipaste三、idea 日志控制台查找日志1.idea 安装插件:Grep console四、beyond compare 4项目工程比较工具1.浏览器下载安装。本地运行五、xampp快速部署本地mysql,tomacat1.浏…

物体检测单阶段SSD

Faster RCNN 数据增广&#xff1a;

外包干了1个月,技术明显退步。。。

有一种打工人的羡慕&#xff0c;叫做“大厂”。 真是年少不知大厂香&#xff0c;错把青春插稻秧。 但是&#xff0c;在深圳有一群比大厂员工更庞大的群体&#xff0c;他们顶着大厂的“名”&#xff0c;做着大厂的工作&#xff0c;还可以享受大厂的伙食&#xff0c;却没有大厂…

Redislnsight-v2远程连接redis

redis安装内容添加&#xff1a; Linux 下使用Docker安装redis-CSDN博客 点击添加 添加ip地址&#xff0c;密码&#xff0c;端口号 创建完成 点击查看内容&#xff1a;

python初学者知识点笔记更新

文章目录 1.main函数入口2.__init__.py 文件作用3.from .applications import server解释4.变量没有修饰&#xff0c;直接创建使用1. 内置数据类型和函数2. 类和对象3.总结 5.mod app.__module__6.集合对比区分集合类型&#xff1a;混合集合类型 7.安装包失败 1.main函数入口 …

利用react和chainlit开发大模型结果人工评测平台

项目背景 利用LLM的prompt做了个简单的服务推荐助手&#xff0c;依据用户的提问找出合适的服务项目推荐给的用户。为了测评prompt的效果&#xff0c;使用reactchainlit开发了一个简单的效果测评平台。在该平台上&#xff0c;可以模拟用户向LLM发出问题&#xff0c;并对大模型返…

阿里通义音频生成大模型 FunAudioLLM 开源

简介 近年来&#xff0c;人工智能&#xff08;AI&#xff09;技术的进步极大地改变了人类与机器的互动方式&#xff0c;特别是在语音处理领域。阿里巴巴通义实验室最近开源了一个名为FunAudioLLM的语音大模型项目&#xff0c;旨在促进人类与大型语言模型&#xff08;LLMs&…

【过题笔记】 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][…

数据库的管理

目录 远程连接的方式 修改数据库uuid流程 数据库的概念 关系型数据库 非关系型数据库 关系型数据和非关系型数据库优缺点 mysql的数据类型 数据库的管理 sql中的名词 sql语言的分类 1.DDL&#xff1a;创建库和表的语句 create 2.DML: 插入数据 insert 修改和更…

内存函数(C语言)

内存函数 以下函数的头文件&#xff1a;string.h 针对内存块进行处理的函数 memcpy 函数原型&#xff1a; void* memcpy(void* destination, const void* source, size_t num);目标空间地址 源空间地址num&#xff0c;被拷贝的字节个数 返回目标空间的起始地…

STM32智能医疗监测系统教程

目录 引言环境准备智能医疗监测系统基础代码实现&#xff1a;实现智能医疗监测系统 4.1 数据采集模块 4.2 数据处理与控制模块 4.3 通信与网络系统实现 4.4 用户界面与数据可视化应用场景&#xff1a;医疗监测与管理问题解决方案与优化收尾与总结 1. 引言 智能医疗监测系统通…

RocketMQ源码学习笔记:Producer发送消息流程

这是本人学习的总结&#xff0c;主要学习资料如下 马士兵教育rocketMq官方文档 目录 1、Overview2、验证消息3、查找路由4、选择消息发送队列4.1、选择队列的策略4.2、源码阅读4.2.1、轮询规避4.2.2、故障延迟规避4.2.2.1、计算规避时间4.2.2.2、选择队列 4.2.3、ThreadLocal的…

正运动控制器:EtherCAT总线初始化

1、EtherCAT总线初始化的目的 运动控制器的EtherCAT 总线接口可用于连接 EtherCAT 伺服驱动器和 EtherCAT 扩展模块&#xff0c;无论连接什么模块&#xff0c; EtherCAT 总线都需要编写一段 EtherCAT 总线初始化程序来进行电机和 EtherCAT 扩展模块的使能。使能之后的应用与脉…

QT多线程下,信号槽分别在什么线程中执行,如何控制?

可以通过connect的第五个参数进行控制信号槽执行时所在的线程 connect有几种连接方式&#xff0c;直接连接、队列连接和 自动连接 直接连接&#xff08;Qt::DirectConnection&#xff09;&#xff1a;信号槽在信号发出者所在的线程中执行 队列连接&#xff08;Qt::QueuedConn…

LeetCode-返回链表倒数第K个节点、链表的回文结构,相交链表

一、返回链表倒数第k个节点 . - 力扣&#xff08;LeetCode&#xff09; 本体思路参展寻找中间节点的方法&#xff0c;寻找中间节点是定义快慢指针&#xff0c;快指针每次走两步&#xff0c;慢指针每次走一步&#xff0c;当快指针为空或者快指针的下一个节点是空时&#xff0c;…

vue实现提交时对不同板块的表单内容进行校验

需求 1、需要对第一个红色框框板块内所有带星号的地方进行校验&#xff0c;并将提示语显示到对应的输入框下面&#xff0c;如图&#xff1a; 2、第二个红色框框板块中&#xff0c;点击 “添加相关人员” 能实现对多人的添加功能&#xff0c;并且能绑定相对应的校验规则 3、在…

linux进行redis的安装并使用RDB进行数据迁移

现在有两台电脑&#xff0c;分别是A&#xff0c;B&#xff0c;现在我要把A电脑上的redis的数据迁移到B电脑上&#xff0c;B电脑上是没有安装redis的 1.找到A电脑的redis的版本 1.先启动A电脑的redis&#xff0c;一般来说&#xff0c;都是直接在linux的控制台输入&#xff1a;re…