如何将表单数据(HTML5 对象)转换为 JSON

2022-08-30 01:33:57

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

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


答案 1

您也可以直接在对象上使用:forEachFormData

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);

这里有一个小提琴,演示了这种方法在一个简单的多选列表中的使用。

更新 3:

作为结束在这里的人的旁注,如果将表单数据转换为json的目的是通过XML HTTP请求将其发送到服务器,则可以直接发送对象而无需转换它。就这么简单:FormData

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

请参阅在 MDN 上使用 FormData 对象作为参考

更新 4:

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

在描述中还提到:

如果值具有 toJSON() 方法,则它负责定义将序列化哪些数据。

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


答案 2

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

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

Object.fromEntries:在 Chrome 73+、Firefox 63+、Safari 12.1 中受支持

如注释中所述,请注意:可以包含具有相同键的多个值(例如,具有相同名称的复选框)。 丢弃重复项,只保留最后一个。FormDataObject.fromEntries()