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

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【C++PythonJava】字符处理详细解读_字符_ASCLL码_字母数字转换_算法竞赛_开发语言

文章目录 Beginning1&#xff09;ASCLL 码2&#xff09;大小比较2&#xff09;判断数字字符3&#xff09;字符、数字间的相互转换End Beginning 在 C 中&#xff0c;字符和整数有着密不可分的关系。原因就是在计算机中&#xff0c;字符是以一种较 ASCLL 码的整数存储的。自然&…

抖音短视频矩阵策略揭秘:引爆流量秘籍

在当前的数字化媒体环境中&#xff0c;抖音已经成为全球最受欢迎的短视频平台之一&#xff0c;每日吸引了亿计的用户浏览各类视频内容。因此&#xff0c;对于众多企业与营销专家而言&#xff0c;掌握在抖音平台上实施高效的搜索引擎优化&#xff08;SEO&#xff09;策略和构建有…

SpringBoot之健康监控(Actuator)

1&#xff0c;基本介绍 Spring Actuator 是 Spring Boot 提供的一个扩展模块&#xff0c;用于监控和管理应用程序的生产环境。它通过 HTTP 端点暴露了大量的监控和管理功能&#xff0c;使得开发者可以在运行时查看应用程序的运行状况、配置信息、性能指标等。 主要功能&#…

根据图片快速生成word、wps latex公式

快速生成word、wps公式&#xff1a;https://simpletex.net/ai/latex_ocr

一站式短视频矩阵开发,高效托管!

短视频矩阵系统源码SaaS解决方案提供全面的开发服务&#xff0c;包括可视化视频编辑、矩阵式内容分发托管以及集成的多功能开发支持。 短视频矩阵&#xff1a;引爆您的数字营销革命 短视频矩阵系统是一套多功能集成解决方案&#xff0c;专为提升在短视频平台上的内容创作、管理…

使用jenkins进行自动化部署

记录一下查看的文档和遇到的坑 什么是jenkins Jenkins是一个开源的持续集成&#xff08;CI&#xff09;和持续交付&#xff08;CD&#xff09;工具&#xff0c;主要用于自动化软件开发的各个阶段&#xff0c;包括构建、测试、部署等。 Jenkins基于Java开发&#xff0c;支持与…

vue中el-table单元格复制功能

一、单页面中使用 1.在el-table上绑定单击事件 cell-click“copyText” 或双击事件 cell-dblclick“copyText” 注&#xff1a;cell-dblclick函数有四个参数&#xff0c;分别是row, column, cell, event&#xff1b; row&#xff1a;可看到被其操作单元格所在行的所有的数据&…

CentOS7安装部署git和gitlab

安装Git 在Linux系统中是需要编译源码的&#xff0c;首先下载所需要的依赖&#xff1a; yum install -y curl-devel expat-devel gettext-devel openssl-devel zlib-devel gcc perl-ExtUtils-MakeMaker方法一 下载&#xff1a; wget https://mirrors.edge.kernel.org/pub/s…

c++ primer plus 第16章string 类和标准模板库,16.1.3 使用字符串

c primer plus 第16章string 类和标准模板库,16.1.3 使用字符串 c primer plus 第16章string 类和标准模板库,16.1.3 使用字符串 文章目录 c primer plus 第16章string 类和标准模板库,16.1.3 使用字符串16.1.3 使用字符串程序清单16.3 hangman.cpp 16.1.3 使用字符串 现在&a…

opencv学习:图像视频的读取截取部分图像数据颜色通道提取合并颜色通道边界填充数值计算图像融合

一、计算机眼中的图像 1.图像操作 构成像素点的数字在0~255之间 RGB叫做图像的颜色通道 h500&#xff0c;w500 2.灰度图像 3. 彩色图像 4.图像的读取 5.视频的读取 cv2.VideoCapture()--在OpenCV中&#xff0c;可以使用VideoCapture来读取视频文件&#xff0c;或是摄像头数…

解决网页中的 video 标签在移动端浏览器(如百度访问网页)视频脱离文档流播放问题

问题现象 部分浏览器视频脱离文档流&#xff0c;滚动时&#xff0c;视频是悬浮出来&#xff0c;在顶部播放 解决方案 添加下列属性&#xff0c;可解决大部分浏览器的脱离文档流的问题 <videowebkit-playsinline""playsInlinex5-playsinlinet7-video-player-t…

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.30、基于卷积神经网络的手写数字旋转角度预测(matlab)

1、卷积神经网络的手写数字旋转角度预测原理及流程 基于卷积神经网络的手写数字旋转角度预测是一个常见的计算机视觉问题。在这种情况下&#xff0c;我们可以通过构建一个卷积神经网络&#xff08;Convolutional Neural Network&#xff0c;CNN&#xff09;来实现该任务。以下…

数学建模·Topsis优劣解距离法

Topsis优劣解 一种新的评价方法&#xff0c;特点就是利用原有数据&#xff0c;客观性强。 相较于模糊评价和层次评价 更加客观&#xff0c;充分利用原有数据&#xff0c;精确反映方案差距 基本原理 离最优解最近&#xff0c;离最劣解越远 具体步骤 正向化 代码与原理与熵权…

Spring Boot中@Async注解的使用及原理 + 常见问题及解决方案

&#x1f604; 19年之后由于某些原因断更了三年&#xff0c;23年重新扬帆起航&#xff0c;推出更多优质博文&#xff0c;希望大家多多支持&#xff5e; &#x1f337; 古之立大事者&#xff0c;不惟有超世之才&#xff0c;亦必有坚忍不拔之志 &#x1f390; 个人CSND主页——Mi…

阿里云GPU服务器安装ComfyUI

连接到GPU服务器: 使用SSH客户端(如PuTTY或终端)连接到你的服务器。命令通常是: ssh usernameserver_ip安装依赖: 确保Python和Git已安装。在大多数Linux系统上,可以这样安装: sudo apt update sudo apt install python3 python3-pip git克隆ComfyUI仓库: 这步骤会下载ComfyUI的…

Jetson-AGX-Orin 非docker环境源码编译安装CyberRT

Jetson-AGX-Orin 非docker环境源码编译安装CyberRT 1、安装依赖 sudo apt update sudo apt-get install g gdb gcc cmake sudo apt install libpoco-dev uuid-dev libncurses5-dev python3-dev python3-pip python3 -m pip install protobuf3.14.02、下载CyberRT源码 git cl…

C语言 ——— 大/小端存储模式的介绍及判断

目录 何为大端小端 如何测试当前机器是大端还是小端 编写代码&#xff0c;判断当前机器的字节序 何为大端小端 大端字节序存储模式&#xff1a;数据的低位字节的内容 存放在 内存的高地址 中&#xff0c;数据的高位字节的内容 保存在 内存的低地址 中 小端字节序存储模式&am…

【系统架构设计师】九、软件工程(面向对象方法|逆向工程)

目录 六、面向对象方法 6.1 基本概念 6.2 面向对象的分析 6.2.1 用例关系 6.2.2 类之间的关系 6.3 面向对象的设计 6.4 面向对象设计原则与设计模式 6.5 面向对象软件的测试 七、逆向工程 历年真题练习 六、面向对象方法 面向对象的分析方法 (Object-Oriented Analys…

Vue从零到实战

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 非常期待和您一起在这个小…