FormData数据中添加json格式数据

最新推荐文章于 2024-06-20 15:00:01 发布
最新推荐文章于 2024-06-20 15:00:01 发布
阅读量4.5k 收藏 7
点赞数 7
分类专栏： 填坑小能手
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/popping_sun/article/details/120323795
版权

FormData JSON Blob 接口开发 数据类型转换
关键词由CSDN通过智能技术生成

今天在写接口时候，有一个接口参数需要的是FormData数据类型，然后里面有一个key值对应value值是json格式的。刚开始直接用append方法往FormData里面加，但是呢key值加上了，对应的value值确实一个Object，这不行啊！没办法，只能继续寻找。然后发现了new Bolb方法，就把这个问题解决了。

formData.append(
      'data',
      new Blob([JSON.stringify(data)], { type: 'application/json' })
    )

popping_Sun
关注
  • 7
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
form表单数据封装成json格式并提交给服务器的实现方法
10-18
下面小编就为大家分享一篇form表单数据封装成json格式并提交给服务器的实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
JSON对象转成formData对象,formData对象转成JSON对象
web全栈开发的博客
11-04 2810
在小程序中体验 在向后端请求时，如果上传的数据里存在file文件对象，需要用到表单提交，这时候我们需要将JSON对象，转成formData对象，具体见代码 const formData = new FormData(); Object.keys(params).forEach((key) => { formData.append(key, params[key]); }); 下面也有可能...
关于JSON.stringify的坑.......
最新发布
ldy-美少女战士
06-20 153
ps: vue的js中想检测是不是数组要用Array.isArray()方法，如果用typeof检测数组，返回值永远是object。就是转json后给什么转没了，于是就重新定义了一下，就没有报错了。
浅谈 JSON 对象和 FormData 相互转换，打通前端与后端的通信血脉
Shids_的博客
02-13 1万+
浅谈 JSON 对象和 FormData 相互转换，打通前端与后端的通信血脉
使用js FormData传文件流，传json（重点） 可以处理动态上传多附件处理
yuting0787的博客
08-23 3270
先介绍js的FormData，FormData是XMLHttpRequest Level 2新增的一个接口，利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用ajax方法来异步的提交这个"表单".使用FormData的最大优点就是我们可以异步上传一个二进制文件. 这里说下FormData的append方法， 给当前FormData对象添加一...
fetch 用form Data 格式 发送数据（带json格式的参数）
Akukudeteng的博客
10-22 5085
坑： 1.fetch如何使用form Data 格式 发送数据？ 答：使用 var formData = new FormData(); formData.append('developerId', '633');//传参数 2.在控制台发现Content-Type:multipart/form-data ；而且数据没有发送成功，后面也没有boundary的分割？ 答：不要在头部设置'Content-Type':'multipart/form-data;', hea...
FormData
-ELZ-
11-23 549
构造函数 FormData 创建一个新的 FormData 对象 方法 FormData.append() 向 FormData 中添加新的属性值。即使对应的属性值已经存在也不会覆盖原值，而是新增一个值。 var formData = new FormData() formData.append("name", "cez") formData.append("name", "zlz") formData.getAll("name") // ["cez", "zlz"] 可以发现，通过 .appe
FormData多文件上传并同时添加其他数据
qq_45484646的博客
09-13 1万+
前言 在做项目时，有一个接口要求上传文件的同时能携带其它数据，在这里使用的是FormData对象来进行操作。简单介绍一下这个对象。 FormData 接口提供了一种表示表单数据的键值对 key/value 的构造方式，并且可以轻松的将数据通过XMLHttpRequest.send() 方法发送出去，本接口和此方法都相当简单直接。如果送出时的编码类型被设为 "multipart/form-data"，它会使用和表单一样的格式。(以上出自这里) 单文件上传 这里使用FormData的append()方法，该方法
Vue 实现把表单form数据 转化成json格式的数据
10-16
在Vue.js开发中，处理表单数据是常见的需求，尤其是当需要将表单数据转换为JSON格式以便于发送到服务器或者进行其他处理时。本文将详细介绍如何在Vue中实现这一功能。 首先，我们要理解表单数据通常是通过HTML的`...
Vue axios 将传递的json数据转为form data的例子
12-13
在某些情况下，比如处理上传文件或某些特定的后端服务，可能需要我们将JSON数据转换为`application/x-www-form-urlencoded`格式的`form data`。本篇文章将详细介绍如何在Vue中使用axios和qs库来实现这个转换。 首先...
JQuery基于FormData异步提交数据文件
11-19
在Web开发中，异步数据提交是提升用户体验的关键技术之一，尤其是在处理表单数据和文件上传时。jQuery的Ajax功能提供了方便的API，使得开发者能够轻松实现无刷新的数据交互。本篇文章将详细介绍如何使用jQuery结合...
表单中的Json格式数据使用方法
03-15
如果我们需要在JSON数据中包含额外的信息，可以使用这个元素将数据以隐藏字段的形式添加到表单中。 总的来说，HTML5结合JSON提供了一种高效、灵活的方式来处理表单数据。开发者可以根据需求，利用JavaScript动态...
前端post请求方式传参参数各种格式详解，form-data，application/x-www-form-urlencoded，application/json，text/xml
热门推荐
qq_43305958的博客
09-02 1万+
前端传参参数各种格式详解一、form-data二、application/x-www-form-urlencoded总结 一、form-data form-data格式一般是用来进行文件上传 调用接口的时候参数data等于formData const formData = new FormData(); formData.append('modelName', code); 二、application/x-www-form-urlencoded 表单的传参格式，常见的post传参格式 data等于一个对象
formData数据中添加JSON格式
yyXieDaiMa的博客
03-13 779
使用 formdata 批量上传多个文件并追加对象数据
杂谈FormData
weixin_52479803的博客
11-09 290
杂谈FormData
H5 FormData 表单数据对象详解 与 Json 对象相互转换
蚩尤后裔-汪茂雄
04-15 5661
目录 FormData 表单对象概述 常用方法 添加、获取数据 修改、删除数据 判断是否含有指定 key entries 遍历数据 项目实例 FormData 表单对象概述 1、FormData 是 Html5 新加进来的一个类,可以模拟表单数据 2、利用FormData对象，可以通过JavaScript键值对来模拟一系列表单控件，可以使用 JQuery 的 $.Ajax ...
formData传递数组
weixin_43773218的博客
07-04 1万+
在formData添加数组时，会有一个的问题，就是post请求会把数组拼接成一个字符串发送给服务器。这种时候有两种解决方案一、后台拿到字符串后，再截取字符串来生成数组二、对数据进行字符串化，即JSON.stringify() let formData = new FormData(); formData.append('coordinate',JSON.stringify(this.$route.query.position.geometry.coordinates[0]))这样就能成功以数组形式添加进fo
postman测试三种传输数据格式(其实是只有两种)，json对象和formData对象互转
weixin_42765975的博客
08-11 1万+
@RequestBody主要用来接收前端传递给后端的json字符串中的数据的(请求体中的数据的)；GET方式无请求体，所以使用@RequestBody接收数据时，前端不能使用GET方式提交数据，而是用POST方式进行提交。在后端的同一个接收方法里，@RequestBody与@RequestParam()可以同时使用，@RequestBody最多只能有一个，而@RequestParam()可以有多个...
JavaScript - 实现向 formData 对象中追加数组或对象，使用 append() 插入数组、对象等复杂数据类型（vue / uniapp / react 项目通用解决方案）
王佳斌
02-14 5201
JS，vue如何在 FormData 中追加数组？uniapp vue js formData传递数组，数组添加进formdata,javascript - 将FormData对象放入数组，FormData传数组对象的方法 前端，vue JS,如何在FormData中追加数组，JS,如何在 FormData 中追加数组，JS,如何在 FormData 中追加数组，formData 传对象和数组、空文件的方法，我可以在javascript中将数组附加到'formdata'吗?，javascript如何向For
formdata格式传递参数json
06-28
### 回答1： FormData格式可以用于传递JSON格式的参数。在JavaScript中，可以使用FormData对象来创建一个表单数据对象，然后使用append()方法将JSON数据添加到该对象中。例如： ``` var formData = new FormData(); var jsonData = {name: '张三', age: 20}; formData.append('data', JSON.stringify(jsonData)); ``` 在这个例子中，我们创建了一个FormData对象，并将一个包含姓名和年龄的JSON对象添加到该对象中。我们使用JSON.stringify()方法将JSON对象转换为字符串，并将其添加到FormData对象中。最后，我们可以将该FormData对象发送到服务器，以便服务器可以处理该JSON数据。 ### 回答2： 在前端开发中，经常需要将参数以 JSON 格式传递给服务器端。而 FormData 格式是用于将表单数据序列化为键值对的一种方式，它最初是用于通过 AJAX 上传文件的。但是，实际上，我们也可以利用 FormData 来传递 JSON 格式的数据。 一般情况下，我们发送请求时，要将 JSON 格式的参数序列化为字符串，然后将其放置在请求体中，例如在使用 fetch 发送 POST 请求时： ``` fetch(url, { method: "POST", body: JSON.stringify(data), headers: { "Content-Type": "application/json" } }) ``` 这里我们将 data 这个 JSON 对象序列化为字符串，并设置请求头的 Content-Type 为 application/json。这样服务器端就能够识别请求体中的 JSON 格式数据，并进行相应处理。 而当我们使用 FormData 格式时，我们可以将 JSON 对象直接放入 FormData 中，其余部分就和使用表单一样，例如： ``` const formData = new FormData(); formData.append("data", JSON.stringify(data)); fetch(url, { method: "POST", body: formData }) ``` 这里我们将 data 对象序列化为字符串，并将其放入 FormData 中，然后使用 fetch 发送 POST 请求。在服务器端中，我们可以获取到请求体中名为 "data" 的键值对，将其内容进行 JSON 解析即可得到 JSON 对象。 值得注意的是，如果直接将 JSON 对象放入 FormData 中，虽然能够传递成功，但并不是所有浏览器都支持。因此，为了兼容性，最好还是将 JSON 对象序列化为字符串再放入 FormData 中。 ### 回答3： FormData 是一种用于在 AJAX 中传输数据的简单 API，并且经常被用来上传二进制文件或者在表单中提交数据。但是当需要把一段 JSON 格式的数据通过 FormData 进行传递时，需要注意以下几点： 首先，许多人错误地认为可以直接将 JSON 对象传递给 FormData，但实际上不行。因为FormData对象不是一个简单的键/值对集合，而是通过HTTP多部分编码来传输整个表单，这意味着需要将JSON转换为一个字符串并设置为FormData的值，并且需要设置一个键来存储该字符串，以使之在服务器端得以正确识别。 其次，当使用 FormData 传递 JSON 数据时，还需要设置请求的 content type 为 application/json，这样服务器才能正确解析传递过来的数据。 最后，需要注意的是，如果 JSON 数据中含有特殊字符，例如 & 或者 +，可以先对其进行 URL 编码，以确保它们被正确处理。 以下是一个示例代码： ```javascript var formData = new FormData(); var jsonData = { name: 'John', age: 30 }; formData.append('json', JSON.stringify(jsonData)); var xhr = new XMLHttpRequest(); xhr.open('POST', 'http://example.com/api', true); xhr.setRequestHeader('Content-Type', 'application/json'); xhr.send(formData); ``` 在这里，我们将 JSON 对象 `jsonData` 转化为字符串并放到 FormData 对象中，以键值对的形式添加到请求中，并设置请求头为 application/json。最后，我们使用 XMLHttpRequest 发送请求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值