如何将FormData (HTML5对象)转换为JSON

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

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

当前回答

下面是一种包含处理多个值的简单方法的方法。如果一个键以[]结尾，它将值组合成一个数组(就像在旧的php约定中一样)，并从键中删除[]:

function formDataToJson(f) {
  return Object.fromEntries(Array.from(f.keys(), k =>
    k.endsWith('[]') ? [k.slice(0, -2), f.getAll(k)] : [k, f.get(k)]));
}

例如，如果你有:

const f = new FormData();
f.append("a", "1");
f.append("a", "2");
f.append("b[]", "3");
f.append("b[]", "4");
formDataToJson(f)  // --> produces {a: "1", b: ["3","4"]}

2022-05-06 01:12:06

其他回答

你也可以直接在FormData对象上使用forEach:

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 stringify方法不会对所有类型的对象开箱即用。关于支持的类型的更多信息，我想参考JSON.stringify MDN文档中的描述部分。

在描述中还提到:

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

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

2017-10-16 15:40:59

如果需要支持序列化嵌套字段(类似于PHP处理表单字段的方式)，可以使用以下函数

2019-12-08 10:15:07

如果你想要json字符串:

var jsonStr =  JSON.stringify($('#formId').serializeObject());

如果你想要一个json对象

var jsonObj =  JSON.parse(JSON.stringify($('#formId').serializeObject()));

2021-07-13 14:41:51

简单易用的功能

我已经为此创建了一个函数

function FormDataToJSON(FormElement){    
    var formData = new FormData(FormElement);
    var ConvertedJSON= {};
    for (const [key, value]  of formData.entries())
    {
        ConvertedJSON[key] = value;
    }

    return ConvertedJSON
}

示例使用

var ReceivedJSON = FormDataToJSON(document.getElementById('FormId'));

在这段代码中，我使用for循环创建了空JSON变量，我在每个迭代中都使用了从formData Object到JSON key的键。

你在GitHub上找到我的JS库中的此代码，如果需要改进，请建议我，我已经在这里放置了代码https://github.com/alijamal14/Utilities/blob/master/Utilities.js

2017-05-24 07:13:11

编辑:我看到已经有一个答案得出了非常相似的结果。

两个主要区别:

这不会将数值键作为数组下标，而是将它们视为对象键。可能不是正确的行为，但我个人从来没有写过使用这种符号的表单，可能会更新它。这不是一个递归函数，这显然不是一个有利或不利的问题

忽略任何缺乏效率的问题。这将处理无限嵌套和数组的重复键。这显然不会转换文件之类的东西，但我不需要它，所以我没有添加它。

下面是一个JSFiddle的转换示例，可以用这个函数实现

一个很好的使用示例(这也是我的用例)是从html表单元素创建一个新的FormData对象，并轻松地将其转换为JSON进行发送。

/**
 * @param {FormData} formData
 * @return {Object}
 */
function formDataToObject(formData) {
    const object = {};
    for (let pair of formData.entries()) {
        const key = pair[0];
        const value = pair[1];
        const isArray = key.endsWith('[]');
        const name = key.substring(0, key.length - (2 * isArray));
        const path = name.replaceAll(']', '');
        const pathParts = path.split('[');
        const partialsCount = pathParts.length;
        let iterationObject = object;
        for (let i = 0; i < partialsCount; i++) {
            let part = pathParts[i];
            let iterationObjectElement = iterationObject[part];
            if (i !== partialsCount - 1) {
                if (!iterationObject.hasOwnProperty(part) || typeof iterationObjectElement !== "object") {
                    iterationObject[part] = {};
                }
                iterationObject = iterationObject[part];
            } else {
                if (isArray) {
                    if (!iterationObject.hasOwnProperty(part)) {
                        iterationObject[part] = [value];
                    } else {
                        iterationObjectElement.push(value);
                    }
                } else {
                    iterationObject[part] = value;
                }
            }
        }
    }

    return object;
}

2022-08-20 01:19:34

如何将FormData (HTML5对象)转换为JSON

推荐文章

最新文章

标签