如何将 HTML5 FormData 转换为 JSON？

将 HTML5 FormData 转换为 JSON

将 HTML5 FormData 对象的条目转换为 JSON 是 Web 开发中的一项常见任务。虽然有多种方法可以实现此目的，但最直接、最有效的方法是直接在 FormData 对象上使用 forEach() 函数。

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

此方法会迭代 FormData 中的每个键值对对象并将它们添加到新的 JavaScript 对象中。然后使用 JSON.stringify() 方法将对象转换为 JSON 字符串。

更新：ES6 箭头函数

对于那些喜欢 ES6 语法的人，可以使用箭头函数编写相同的解决方案：

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

更新 2：支持多值表单元素

支持具有多个值的表单元素，例如 multi -选择列表，可以使用以下代码：

var object = {};
formData.forEach((value, 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：通过XMLHttpRequest和Fetch API直接提交

直接将FormData发送到服务器而不进行转换可以使用 XMLHttpRequest 对象或 Fetch API：

<code class="javascript">var request = new XMLHttpRequest();
request.open('POST', 'http://example.com/submitform.php');
request.send(formData);</code>

<code class="javascript">fetch('http://example.com/submitform.php', {
  method: 'POST',
  body: formData
}).then((response) => { 
  // do something with response here... 
});</code>

更新 4：复杂对象的 JSON 序列化

可以为复杂对象定义自定义序列化逻辑通过 toJSON() 方法获取对象。

以上是如何将 HTML5 FormData 转换为 JSON？的详细内容。更多信息请关注PHP中文网其他相关文章！