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

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


当前回答

多年后的香草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'}

其他回答

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

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

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

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

可以通过使用FormData()对象来实现这一点。这个FormData对象将使用表单的当前键/值填充表单,使用每个元素的name属性填充键,使用它们提交的值填充值。它还将对文件输入内容进行编码。

例子:

var myForm = document.getElementById('myForm');
myForm.addEventListener('submit', function(event)
{
    event.preventDefault();
    var formData = new FormData(myForm),
        result = {};

    for (var entry of formData.entries())
    {
        result[entry[0]] = entry[1];
    }
    result = JSON.stringify(result)
    console.log(result);

});

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

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

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

如果您正在使用lodash,可以使用fropairs简单地完成

import {fromPairs} from 'lodash';

const object = fromPairs(Array.from(formData.entries()));

的一行程序!

Array.from(fd).reduce((obj, [k, v]) => ({...obj, [k]: v}), {});

今天我了解到firefox有对象扩展支持和数组解构!