如何将 FormData（HTML5 对象）转换为 JSON

Question

如何将条目从 HTML5 FormData 对象转换为 JSON？

该解决方案不应使用 jQuery。此外，它不应该简单地序列化整个 FormData 对象，而应该只序列化它的键/值条目。

原文由 Leonardo Villela 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您也可以直接在 FormData 对象上使用 forEach ：

 var object = {};
 formData.forEach(function(value, key){
 object[key] = value;
 });
 var json = JSON.stringify(object);

---

更新：

对于那些喜欢使用 ES6 箭头函数 的相同解决方案的人：

 var object = {};
 formData.forEach((value, key) => object[key] = value);
 var json = JSON.stringify(object);

更新 2：

对于那些想要支持多选列表或其他具有多个值的表单元素的 人（因为关于这个问题的答案下面有很多评论，我将添加一个可能的解决方案） ：

 var object = {};
 formData.forEach((value, key) => {
 // Reflect.has in favor of: object.hasOwnProperty(key)
 if(!Reflect.has(object, key)){
 object[key] = value;
 return;
 }
 if(!Array.isArray(object[key])){
 object[key] = [object[key]];
 }
 object[key].push(value);
 });
 var json = JSON.stringify(object);

Here a Fiddle 通过一个简单的多选列表演示了此方法的使用。

更新 3：

作为对那些在这里结束的人的附注，如果将表单数据转换为 json 的目的是通过 XML HTTP 请求将其发送到服务器，您可以直接发送 FormData 对象而不进行转换。就这么简单：

 var request = new XMLHttpRequest();
 request.open("POST", "http://example.com/submitform.php");
 request.send(formData);

另请参阅 在 MDN 上 使用 FormData 对象 以供参考：

更新 4：

正如我的回答下面的评论之一中提到的，JSON stringify 方法不适用于所有类型的对象。有关支持哪些类型的更多信息，我想参考 JSON.stringify 的 MDN 文档中的描述部分。

在描述中还提到：

如果该值有一个 toJSON() 方法，它负责定义哪些数据将被序列化。

这意味着您可以为自己的 toJSON 序列化方法提供用于序列化自定义对象的逻辑。像这样，您可以快速轻松地为更复杂的对象树构建序列化支持。

原文由 Wilt 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

在 2019 年，这种任务变得超级容易。

 JSON.stringify(Object.fromEntries(formData));

Object.fromEntries : 支持 Chrome 73+, Firefox 63+, Safari 12.1

如评论中所述， 请注意： FormData 可以包含具有相同键的多个值（例如具有相同名称的复选框）。 Object.fromEntries() 丢弃重复项，只保留最后一个。

原文由 hakatashi 发布，翻译遵循 CC BY-SA 4.0 许可协议