Axios 里 post formdata 的数据跟jquery中formdata数据格式不一样

最新推荐文章于 2024-07-23 16:15:54 发布

ou4582850

最新推荐文章于 2024-07-23 16:15:54 发布

阅读量1.6k

点赞数

文章标签： formdata axios $.ajax

本文链接：https://blog.csdn.net/ou4582850/article/details/79809104

版权

今天遇到一个问题，

在jquery中使用content-type=application/x-www-form-urlencoded 和在axios中添加

{headers:{"Content-Type":"application/x-www-form-urlencoded"}}时，请求的数据不一样：

jquery 提交后 formdata 是一个数组而 axios 请求中是一个对象而不是数组

在网上找到资料后找到解决方法

var qs = require("qs");

var param = qs.stringfy(data);

再将param传给axios 这样就可以使请求的数据跟jquery相同

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

ou4582850

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

13 使用Vue + FormData + axios实现图片上传功能实战

xingyu_qie的专栏

06-21

1万+

文本通过Vue实例项目，使用axios + FormData实现图片上传做为例子，为下一节图书信息上传做准备

axios post提交表单数据，以及后端接收(gin)

weixin_44562809的博客

04-20

2916

axios post提交表单数据，以及后端接收(gin) 后端使用gin框架。网上说的最多的是,在axios请求中修改Content-Type,如下 headers: { 'Content-Type': 'application/x-www-form-urlencoded' } 但是，到这里只成功了一半，如果向下面这样发送请求，在后端把请求打印出来分析，会发现收到的是一个json对象。 // axios文档中的例子 axios({ method: 'post', url:

参与评论您还未登录，请先登录后发表或查看评论

axios post提交formdata的实例

08-27

下面小编就为大家分享一篇axios post提交formdata的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

Vue axios 将传递的json数据转为form data

GallopYD

06-14

1万+

Vue axios 将传递的json数据转为form data 修改main.js文件中axios的配置：在发送请求前将数据用qs模块转化修改请求头的Content-Type='application/x-www-form-urlencoded’ 具体配置如下： import axios from 'axios' import qs from 'qs' // 添加请求拦截器 axio...

Axios 通过 FormData 上传文件

最新发布

csdnzhaoxiaosheng的博客

07-23

475

Axios 通过 FormData 上传文件

解决axios发送提交数组数据都变成了object而非数据

tanxinji的博客

06-15

2873

有的时候，想通过axios向后端传数组，一开始是直接传: 后来发现，直接传不行，发送的数据变成了这样: 最后发现，需要将数组转换成json字符串之后，在提交给后端，就可以了！将数组转换成json的代码: 这样就可以提交正确数据了！......

vue 使用qs向后端传递表单FormData参数

pz3305636904的博客

12-02

7421

axois_qs 使用表单传参在使用vue+elementUI搭建了登录页面之后，想和后端的Springboot对接一下；对接的vue-cli配置研究一番再写笔记；总所周知，再前后端对接的时候，后端接收的一般就是字符串，直接返回json字符串；而前端内，最好选择表单字段，也就是applicaton/x-www-form-urlencoded格式，这种后端最好接收。那么，如何使用？引入a...

qs框架快速将JSON格式转换为FormData格式

weixin_71583566的博客

09-02

2279

qs框架快速将JSON格式转换为FormData格式

Ajax复习02-(form 表单,axios 拦截器,FormData文件上传)

m0_64526818的博客

01-17

1357

form 表单,axios 拦截器,FormData文件上传

AJAX 拦截器/FormData文件上传/XMLHttpRequest

FellAsleep的博客

01-11

427

1.axios拦截器拦截器（interceptors）用来全局拦截 axios 的每一次请求与响应。好处：可以把每个请求中，某些重复性的业务代码封装到拦截器中，提高代码的复用性。 1.1 使用拦截器实现loading效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=

jQuery高级用法和axios

酷爱前端的小陈博客

04-09

602

1 jQuery实现文件上传 1. 定义UI结构  <scriptsrc="./lib/jquery.js"></script>  <inputtype="file"id="file1"/>  <buttonid="btnUpload">上传</butt...

axios配置后，post提交formdata

abcde158308的博客

05-22

2882

var fd = new FormData() fd.append('file', files[0]) let config = { headers: { 'Content-Type': 'multipart/form-data' } } axios.post(that.uploadUrl, fd,config).then( res => { cons...

axios用post提交的数据格式

TSeven37的博客

10-23

2036

jQuery.ajax设置请求头实现post请求发送数据的格式（Form Data和Request Payload）

热门推荐

徐同保的专栏

09-25

7万+

Request Payload 请求头部的Content-Type: application/json，请求正文是一个 json 格式的字符串 Form Data 请求头部的Content-Type: application/x-www-form-urlencoded，请求正文是类似 get 请求 url 的请求参数 <!DOCTYPE html> <html l...

axios+qs简单实现post请求form-data格式

Mrbignose的博客

07-04

1640

axios+qs简单实现post请求form-data格式有的时候后台接口以form-data的格式来接收参数，那么默认的写法后台是拿不到参数的，这个时候前端必须得以form-data的格式来传递核心知识 1.引入qs npm install -save qs #or <script src="https://cdn.bootcdn.net/ajax/libs/qs/6.9.4/qs.min.js"></script> qs官网地址 2.引入axios npm

vue axios发送formData数据格式的设置

qq_42099419的博客

08-21

1201

this.$ajax({ method: 'post', headers:{ 'Content-Type': 'application/x-www-form-urlencoded' ...

转换formdata参数格式

Uncle_long的博客

07-30

8891

在formdata中传递复杂参数时，很头疼，期望是一个样子，结果到了后台又是另一个样子，介绍几个基本的formdata格式传递一个普通的对象obj:{name:'testname',age:'testage'} 需要写成这个样子 ‘obj[name]’:'testname' ‘obj[age]’:'testage' 传递一个数组arr:['name','age','sex'] 需要写成这个...

使用axios将表单中的数据提交springboot

06-10

好的，使用 axios 将表单数据提交给 Spring Boot 后端的实现步骤如下： 1. 在前端，获取表单数据可以使用 jQuery 的 serialize 方法，将表单中的数据序列化为 URL 编码的字符串。 2. 使用 axios 发送 POST 请求到 Spring Boot 后端，将序列化后的表单数据作为请求体发送。 3. 在 Spring Boot 后端，定义一个 POST 接口，使用 @RequestBody 注解将请求体中的数据映射为 Java 对象。下面是一个基本的示例代码： ```javascript // HTML 表单 <form id="my-form"> <input type="text" name="username" value="" /> <input type="password" name="password" value="" /> <button type="submit">Submit</button> </form> // JavaScript 代码 $('#my-form').on('submit', function(event) { event.preventDefault(); // 阻止表单默认提交行为 var formData = $(this).serialize(); // 序列化表单数据 axios.post('url/to/springboot/api', formData) .then(function(response) { console.log(response.data); }) .catch(function(error) { console.log(error); }); }); // Spring Boot 后端代码 @RestController @RequestMapping("/api") public class MyController { @PostMapping("/submit") public String handleSubmit(@RequestBody MyForm form) { // 处理表单数据，form 对象中包含表单中的数据 return "success"; } } // 表单数据的 Java 对象定义 public class MyForm { private String username; private String password; // getter 和 setter 方法省略 } ``` 其中，`url/to/springboot/api` 是 Spring Boot 后端接口的 URL 地址，需要替换为实际的地址。`MyForm` 类是表单数据的 Java 对象定义，可以根据表单的实际情况进行修改。在后端，使用 @RequestBody 注解将请求体中的数据映射为 Java 对象，可以方便地进行处理。