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

问题描述：

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

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

第 1 个答案：

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

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：

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

在描述中还提到：

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

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

谁能告诉我如何返回上一页而不是特定路线？使用此代码时：var BackButton = React.createClass({ mixins: [Router.Navigation], ...