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

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


当前回答

2019年,这种任务变得超级简单。

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

Object.fromEntries:支持Chrome 73+, Firefox 63+, Safari 12.1

正如评论中提到的,请注意:FormData可以包含多个具有相同键的值(例如具有相同名称的复选框)。fromentries()丢弃重复项,只保留最后一个。

其他回答

你可以试试这个

formDataToJSON($('#form_example'));

# Create a function to convert the serialize and convert the form data
# to JSON
# @param : $('#form_example');
# @return a JSON Stringify
function formDataToJSON(form) {
    let obj = {};
    let formData = form.serialize();
    let formArray = formData.split("&");

    for (inputData of formArray){
        let dataTmp = inputData.split('=');
        obj[dataTmp[0]] = dataTmp[1];
    }
    return JSON.stringify(obj);
}

多年后的香草ajs (es6)

let body = new FormData()

body.set('key1', 'value AA')

body.set('key2', 'value BB')

let data = [...body.keys()].reduce( (acc, key, idx) => {
    acc[key] = body.get(key)
    return acc
} , {} )

console.log(JSON.stringify(data)) // {key1: 'value AA', key2: 'value BB'}

简单易用的功能

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

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

我知道已经很晚了,但这是解决方案;

new URLSearchParams(new FormData(formElement)).toString()

这个可以作为正文发送。遗憾的是,它不是JSON。

对于我的目的,包括多选,如复选框,这是很好的:

JSON.stringify(Array.from((new FormData(document.querySelector('form'))).entries()).reduce((map = {}, [key, value]) => {
    return {
        ...map,
        [key]: map[key] ? [...map[key], value] : value,
    };
}, {}));