首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何将FormData转换成Object,然后再JSON.stringify它?

将FormData转换成Object,然后再使用JSON.stringify进行序列化的方法如下:

  1. 创建一个空的JavaScript对象,用于存储FormData的键值对。
  2. 遍历FormData对象的所有键值对,将其添加到JavaScript对象中。
  3. 使用JSON.stringify方法将JavaScript对象转换成JSON字符串。

以下是示例代码:

代码语言:txt
复制
function formDataToObject(formData) {
  var obj = {};
  formData.forEach(function(value, key){
    obj[key] = value;
  });
  return obj;
}

var formData = new FormData();
formData.append('name', 'John');
formData.append('age', 25);

var obj = formDataToObject(formData);
var jsonString = JSON.stringify(obj);

console.log(jsonString);

这段代码首先定义了一个名为formDataToObject的函数,该函数接受一个FormData对象作为参数,并返回一个转换后的JavaScript对象。

在函数内部,我们创建了一个空的JavaScript对象obj。然后,使用forEach方法遍历FormData对象的所有键值对。对于每个键值对,我们将键作为对象的属性,值作为属性值添加到obj中。

最后,我们使用JSON.stringify方法将obj转换成JSON字符串,并将结果存储在jsonString变量中。

请注意,这只是一种将FormData转换成Object并进行JSON序列化的方法,具体实现可能因应用场景的不同而有所变化。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

浅析 FormData

{} 等等,,可以参考 为何不推荐使用 JSON.stringify 做深拷贝 (https://segmentfault.com/a/1190000023595021),不过 JSON.stringify...还有第三个参数,有兴趣的同学可以去了解下,这是其一,其二,有同学要说了,如果要是图片那可以转换成 base64 格式进行上传解决,这种方式虽然可行,但是转换成 base64 格式需要很多字符,占用很多资源...定义 FormData 这种方式相信很多同学都比较熟悉,提供了一种表示表单数据的键值对 key/value 的构造方式,由名称和定义就知道 FormData 是专门为表单量身定做的类型,但其实其功能要比...() for (const key in _data) { let value = _data[key] if (_data[key] instanceof Object && !...specialFileType.includes(_data[key].constructor.name)) { value = JSON.stringify(_data[key])

1.7K10
  • 写前端就是写表单?

    小弟不才,曾有幸参与某中台的表单引擎的开发工作,一般开发前我们都是先用领域设计模型分析一波,时间的关系,先上图 用现在流行的八卦文翻译一下就是要先找出业务的聚合根,再分析的属性,然后再总结的生命周期...的博主曾经说过:“控制最小边界,组合,就是好架构” 所以我们先设计一个最小的表单 最小的表单 1.要有一个 2.要有一个formData 3.要有一个控件配置表 配置表 建一个...: Function // 转换成多个其他值 propShowValue?:string //显示的字段 handleChange?...每次formData值的变动就再产生出一个新的fieldList fieldListMaker诞生 我马上改成如下: get formDataString() { return JSON.stringify...(this.formData) } @Watch('formDataString', { immediate: true, deep: false }) formDataChanged(val: any

    43620

    js api 之 fetch、querySelector、form、atob及btoa

    document.fm.reset(); // ...更多操作请在chrome控制台输入命令 fetch fetch 为js 新内置的http请求函数,用于替代ajax及原始的XMLHttpRequest,与ajax相似的是提供了请求头...请求本身是没有请求体的,所以fetch的请求配置中一定不能有body的配置项 由于GET请求本身是没有请求体的,所以headers项可以不配置 请求结果在第一个then的时候,数据是一个steam,所以需要转换成...() 函数转换成字符串 fetch:POST(form)请求 html: <form method="GET" style="margin-left:5%;" name="fm" action...document.querySelector("input[name=price]").value; // price = Number(price) /* let formdata...= new FormData(); formdata.append("name",name); formdata.append("price",price

    1.5K30

    基于TypeScript封装Axios笔记(二)

    foo=@:+,注意,我们会把空格 转换成 +。 空值忽略 对于值为 null 或者 undefined 的属性,我们是不会添加到 url 参数中的。...我们发现 send 方法的参数支持 Document 和 BodyInit 类型,BodyInit 包括了 Blob, BufferSource, FormData, URLSearchParams,...', 3 url: '/base/post', 4 data: { 5 a: 1, 6 b: 2 7 } 8}) 这个时候 data是不能直接传给 send 函数的,我们需要把转换成...函数呢,因为 isObject 的判断方式,对于 FormData、ArrayBuffer 这些类型,isObject 判断也为 true,但是这些类型的数据我们是不需要做处理的,而 isPlainObject...实际上是因为我们虽然执行 send 方法的时候把普通对象 data 转换成一个 JSON 字符串,但是我们请求header 的 Content-Type 是 text/plain;charset=UTF

    76510

    面试官:如何防止接口重复请求?我给出了三个方案!

    那我们可不可以通过代码逻辑直接把完全相同的请求给拦截掉,不让到达服务端呢?这个思路不错,我们说干就干。...思路我们已经明确了,但这里有几个需要注意的点: 我们在拿到响应结果后,返回给之前我们挂起的请求时,我们要用到发布订阅模式(日常在面试题中看到,这次终于让我给用上了(^▽^)) 对于挂起的请求,我们需要将它拦截,不能让执行正常的请求逻辑...我们打印一下请求的config: 可以看到,请求体data中的数据是FormData类型,而我们在生成请求key的时候,是通过JSON.stringify方法进行操作的,而对于FormData类型的数据执行该函数得到的只有...function isFileUploadApi(config) { return Object.prototype.toString.call(config.data) === "[object...FormData]" } 最后 到这里,整个的需求总算是完结啦!

    39510

    【总结】1990- 前端接口防止重复请求实现方案

    那我们可不可以通过代码逻辑直接把完全相同的请求给拦截掉,不让到达服务端呢?这个思路不错,我们说干就干。...思路我们已经明确了,但这里有几个需要注意的点: 我们在拿到响应结果后,返回给之前我们挂起的请求时,我们要用到发布订阅模式(日常在面试题中看到,这次终于让我给用上了(^▽^)) 对于挂起的请求,我们需要将它拦截,不能让执行正常的请求逻辑...我们打印一下请求的config: image.png 可以看到,请求体data中的数据是FormData类型,而我们在生成请求key的时候,是通过JSON.stringify方法进行操作的,而对于FormData...function isFileUploadApi(config) { return Object.prototype.toString.call(config.data) === "[object...FormData]" } 最后 到这里,整个的需求总算是完结啦!

    15210

    前端接口防止重复请求实现方案

    那我们可不可以通过代码逻辑直接把完全相同的请求给拦截掉,不让到达服务端呢?这个思路不错,我们说干就干。...思路我们已经明确了,但这里有几个需要注意的点: 我们在拿到响应结果后,返回给之前我们挂起的请求时,我们要用到发布订阅模式(日常在面试题中看到,这次终于让我给用上了(^▽^)) 对于挂起的请求,我们需要将它拦截,不能让执行正常的请求逻辑...我们打印一下请求的config: image.png 可以看到,请求体data中的数据是FormData类型,而我们在生成请求key的时候,是通过JSON.stringify方法进行操作的,而对于FormData...function isFileUploadApi(config) { return Object.prototype.toString.call(config.data) === "[object...FormData]" } 最后 到这里,整个的需求总算是完结啦!

    19510
    领券