如何在没有 jQuery 的情况下将 HTML5 FormData 条目转换为 JSON？-js教程-PHP中文网

如何在没有 jQuery 的情况下将 HTML5 FormData 条目转换为 JSON？

Patricia Arquette

发布： 2024-10-29 19:48:02

原创

232 人浏览过

How to Convert HTML5 FormData Entries into JSON without jQuery?

将 HTML5 FormData 条目转换为 JSON

在处理表单数据并将其传递到服务器端点或 API 时，将 HTML5 FormData 条目转换为 JSON 至关重要。这是一个不依赖 jQuery 或序列化的解决方案：

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

登录后复制

处理多值表单元素：

如果需要支持多选列表或其他具有多个值的表单元素，可以按如下方式扩展解决方案：

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

登录后复制

直接无需转换即可提交到服务器：

如果您的目标是将 FormData 提交到服务器，您可以绕过 JSON 转换步骤，直接通过 Ajax 或 Fetch API 发送 FormData 对象本身：

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

登录后复制

fetch('http://example.com/submitform.php', {
  method: 'POST',
  body: formData
}).then((response) => { 
  // Handle server response here... 
});

登录后复制

不可序列化对象的注意事项：

请记住，如果没有额外的自定义，JSON stringify 方法可能无法处理所有类型的对象。如果您遇到对象序列化问题，您可以在对象上定义自己的 toJSON() 方法来指定所需的序列化行为。

以上是如何在没有 jQuery 的情况下将 HTML5 FormData 条目转换为 JSON？的详细内容。更多信息请关注PHP中文网其他相关文章！