如何将 HTML5 FormData 转换为 JSON 以进行客户端-服务器通信？

将 HTML5 FormData 转换为 JSON

将 HTML5 FormData 对象转换为 JSON 允许将表单数据序列化为机器可读的格式。这对于在客户端和服务器之间传输数据非常有用。

使用自定义对象和 JSON.stringify 的方法

无需 jQuery 或序列化 FormData 条目即可将 FormData 条目转换为 JSON整个对象：

<code class="javascript">var object = {};
formData.forEach(function(value, key){
    object[key] = value;
});
var json = JSON.stringify(object);</code>

更新 1：ES6 箭头函数

使用 ES6 箭头函数：

<code class="javascript">var object = {};
formData.forEach((value, key) => object[key] = value);
var json = JSON.stringify(object);</code>

更新 2：支持多值元素

对于多选列表或其他具有多个值的表单元素：

<code class="javascript">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);</code>

更新3：直接传输FormData

通过 XMLHttpRequest 将 FormData 发送到服务器：

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

或使用 Fetch API：

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

更新 4：复杂的自定义 toJSON 方法对象

对于自定义对象，定义一个 toJSON 方法来序列化其内容。有关 JSON.stringify 限制的更多信息，请参阅 MDN 文档。

以上是如何将 HTML5 FormData 转换为 JSON 以进行客户端-服务器通信？的详细内容。更多信息请关注PHP中文网其他相关文章！