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

小开

你可以通过使用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);


});

小开

简单易用的功能

我创建了一个函数

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变量，我在每个迭代中都使用了keys从formData对象到JSON键。

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

小开

最佳答案

你也可以直接在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);

Here a Fiddle .用一个简单的多选择列表演示了这个方法的使用。

更新3:

作为结束这里的旁注，如果将表单数据转换为json的目的是通过XML HTTP请求将其发送到服务器，您可以直接发送FormData对象而不进行转换。就这么简单:

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

看到也Using FormData Objects on MDN for reference:

更新4:

正如在下面的评论中提到的，我的答案JSON stringify方法不会为所有类型的对象开箱即用。有关支持的类型的更多信息，我想参考JSON.stringify MDN文档中的Description部分。

在描述中还提到:

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

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

小开

如果你正在使用lodash，可以用fromPairs简单地完成

import {fromPairs} from 'lodash';


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

小开

这里有一种更函数化的方式，不需要使用库。

Array.from(formData.entries()).reduce((memo, [key, value]) => ({
...memo,
[key]: value,
}), {});

例子:

document.getElementById('foobar').addEventListener('submit', (e) => {
e.preventDefault();


const formData = new FormData(e.target);
const data = Array.from(formData.entries()).reduce((memo, [key, value]) => ({
...memo,
[key]: value,
}), {});
document.getElementById('output').innerHTML = JSON.stringify(data);
});

<form id='foobar'>
<input name='baz' />
<input type='submit' />
</form>


<pre id='output'>Input some value and submit</pre>

小开

如果你有多个同名的条目，例如，如果你使用<SELECT multiple>或有多个同名的<INPUT type="checkbox">，你需要注意这一点，并将值创建一个数组。否则只能得到最后选中的值。

以下是es6的现代版本:

function formToJSON( elem ) {
let output = {};
new FormData( elem ).forEach(
( value, key ) => {
// Check if property already exist
if ( Object.prototype.hasOwnProperty.call( output, key ) ) {
let current = output[ key ];
if ( !Array.isArray( current ) ) {
// If it's not an array, convert it to an array.
current = output[ key ] = [ current ];
}
current.push( value ); // Add the new value to the array.
} else {
output[ key ] = value;
}
}
);
return JSON.stringify( output );
}

稍旧的代码(但IE11仍然不支持，因为它不支持ForEach或entries上的FormData)

function formToJSON( elem ) {
var current, entries, item, key, output, value;
output = {};
entries = new FormData( elem ).entries();
// Iterate over values, and assign to item.
while ( item = entries.next().value )
{
// assign to variables to make the code more readable.
key = item[0];
value = item[1];
// Check if key already exist
if (Object.prototype.hasOwnProperty.call( output, key)) {
current = output[ key ];
if ( !Array.isArray( current ) ) {
// If it's not an array, convert it to an array.
current = output[ key ] = [ current ];
}
current.push( value ); // Add the new value to the array.
} else {
output[ key ] = value;
}
}
return JSON.stringify( output );
}

小开

你可以试试这个

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

小开

这篇文章已经有一年了……但是，我真的非常非常喜欢ES6 @dzuc的答案。然而，它是不完整的，不能够处理多个选择或复选框。已经指出了这一点，并提供了代码解决方案。我发现它们很笨重，而且没有优化。所以我写了两个基于@dzuc的版本来处理这些情况:

对于ASP样式的表单，多个项目名称可以简单重复。

let r=Array.from(fd).reduce(
(o , [k,v]) => (
(!o[k])
? {...o , [k] : v}
: {...o , [k] : [...o[k] , v]}
)
,{}
);
let obj=JSON.stringify(r);

一行热门版本:

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

对于PHP样式表单，其中多个项目名称必须有[]后缀。

let r=Array.from(fd).reduce(
(o , [k,v]) => (
(k.split('[').length>1)
? (k=k.split('[')[0]
, (!o[k])
? {...o , [k] : [v]}
: {...o , [k] : [...o[k] , v ]}
)
: {...o , [k] : v}
)
,{}
);
let obj=JSON.stringify(r);

一行高手版:

Array.from(fd).reduce((o,[k,v])=>((k.split('[').length>1)?(k=k.split('[')[0],(!o[k])?{...o,[k]:[v]}:{...o,[k]:[...o[k],v]}):{...o,[k]:v}),{});

支持多级数组的PHP表单扩展。

自从上次我写了前面的第二个案例以来，在工作中出现了PHP表单在多层上有复选框的情况。我写了一个新的案例来支持之前的案例和这个案例。我创建了一个代码片段来更好地展示这个案例，结果显示在这个演示的控制台上，根据您的需要修改它。我试图在不影响性能的情况下尽可能地优化它，然而，它损害了一些人类的可读性。它利用了数组是对象的优势，而指向数组的变量被保留为引用。这案子没有高手，请便。

let nosubmit = (e) => {
e.preventDefault();
const f = Array.from(new FormData(e.target));
const obj = f.reduce((o, [k, v]) => {
let a = v,
b, i,
m = k.split('['),
n = m[0],
l = m.length;
if (l > 1) {
a = b = o[n] || [];
for (i = 1; i < l; i++) {
m[i] = (m[i].split(']')[0] || b.length) * 1;
b = b[m[i]] = ((i + 1) == l) ? v : b[m[i]] || [];
}
}
return { ...o, [n]: a };
}, {});
console.log(obj);
}
document.querySelector('#theform').addEventListener('submit', nosubmit, {capture: true});

<h1>Multilevel Form</h1>
<form action="#" method="POST" enctype="multipart/form-data" id="theform">
<input type="hidden" name="_id" value="93242" />
<input type="hidden" name="_fid" value="45c0ec96929bc0d39a904ab5c7af70ef" />
<label>Select:
<select name="uselect">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</label>
<br /><br />
<label>Checkboxes one level:<br/>
<input name="c1[]" type="checkbox" checked value="1"/>v1
<input name="c1[]" type="checkbox" checked value="2"/>v2
<input name="c1[]" type="checkbox" checked value="3"/>v3
</label>
<br /><br />
<label>Checkboxes two levels:<br/>
<input name="c2[0][]" type="checkbox" checked value="4"/>0 v4
<input name="c2[0][]" type="checkbox" checked value="5"/>0 v5
<input name="c2[0][]" type="checkbox" checked value="6"/>0 v6
<br/>
<input name="c2[1][]" type="checkbox" checked value="7"/>1 v7
<input name="c2[1][]" type="checkbox" checked value="8"/>1 v8
<input name="c2[1][]" type="checkbox" checked value="9"/>1 v9
</label>
<br /><br />
<label>Radios:
<input type="radio" name="uradio" value="yes">YES
<input type="radio" name="uradio" checked value="no">NO
</label>
<br /><br />
<input type="submit" value="Submit" />
</form>

小开

尽管来自@dzuc的答案已经很好了，你可以使用数组解构(在现代浏览器或Babel中可用)使它更优雅:

// original version from @dzuc
const data = Array.from(formData.entries())
.reduce((memo, pair) => ({
...memo,
[pair[0]: pair[1],
}), {})


// with array destructuring
const data = Array.from(formData.entries())
.reduce((memo,[key, value]) => ({
...memo,
[key]: value,
}), {})

小开

如果下列物品能满足你的需求，那你就很幸运了:

你想把一个数组的数组，比如[['key','value1'], ['key2','value2'](就像FormData给你的那样)转换成一个key->值对象，比如{key1: 'value1', key2: 'value2'}，然后把它转换成一个JSON字符串。
你的目标浏览器/设备是最新的ES6解释器，或者是用babel之类的东西编译。
你想用最小的方法来完成。

下面是你需要的代码:

const data = new FormData(document.querySelector('form'));
const json = JSON.stringify(Array.from(data).reduce((o,[k,v])=>(o[k]=v,o),{}));

希望这能帮助到一些人。

小开

的一行程序!

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

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

小开

为我工作

                var myForm = document.getElementById("form");
var formData = new FormData(myForm),
obj = {};
for (var entry of formData.entries()){
obj[entry[0]] = entry[1];
}
console.log(obj);

小开

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

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

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

正如注释中提到的，请注意: FormData可以包含具有相同键的多个值(例如具有相同名称的复选框)。Object.fromEntries() 扔掉重复的东西，只保留最后一个。

小开

在我的情况下，形式数据是数据，消防基地是期待一个对象，但数据包含对象以及所有其他东西，所以我尝试了数据。珍惜它的作用!!

小开

我在这里迟到了。但是，我做了一个简单的方法来检查输入type="checkbox"

var formData = new FormData($form.get(0));
var objectData = {};
formData.forEach(function (value, key) {
var updatedValue = value;
if ($('input[name="' + key + '"]').attr("type") === "checkbox" && $('input[name="' + key + '"]').is(":checked")) {
updatedValue = true; // we don't set false due to it is by default on HTML
}
objectData[key] = updatedValue;
});
var jsonData = JSON.stringify(objectData);

我希望这能帮助到其他人。

小开

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

function update(data, keys, value) {
if (keys.length === 0) {
// Leaf node
return value;
}


let key = keys.shift();
if (!key) {
data = data || [];
if (Array.isArray(data)) {
key = data.length;
}
}


// Try converting key to a numeric value
let index = +key;
if (!isNaN(index)) {
// We have a numeric index, make data a numeric array
// This will not work if this is a associative array
// with numeric keys
data = data || [];
key = index;
}
  

// If none of the above matched, we have an associative array
data = data || {};


let val = update(data[key], keys, value);
data[key] = val;


return data;
}


function serializeForm(form) {
return Array.from((new FormData(form)).entries())
.reduce((data, [field, value]) => {
let [_, prefix, keys] = field.match(/^([^\[]+)((?:\[[^\]]*\])*)/);


if (keys) {
keys = Array.from(keys.matchAll(/\[([^\]]*)\]/g), m => m[1]);
value = update(data[prefix], keys, value);
}
data[prefix] = value;
return data;
}, {});
}


document.getElementById('output').textContent = JSON.stringify(serializeForm(document.getElementById('form')), null, 2);

<form id="form">
<input name="field1" value="Field 1">
<input name="field2[]" value="Field 21">
<input name="field2[]" value="Field 22">
<input name="field3[a]" value="Field 3a">
<input name="field3[b]" value="Field 3b">
<input name="field3[c]" value="Field 3c">
<input name="field4[x][a]" value="Field xa">
<input name="field4[x][b]" value="Field xb">
<input name="field4[x][c]" value="Field xc">
<input name="field4[y][a]" value="Field ya">
<input name="field5[z][0]" value="Field z0">
<input name="field5[z][]" value="Field z1">
<input name="field6.z" value="Field 6Z0">
<input name="field6.z" value="Field 6Z1">
</form>


<h2>Output</h2>
<pre id="output">
</pre>

小开

到目前为止，我还没有看到FormData.getAll方法。

除了从FormData对象中返回与给定键相关联的所有值外，使用Object.fromEntries方法也非常简单。

var formData = new FormData(document.forms[0])


var obj = Object.fromEntries(
Array.from(formData.keys()).map(key => [
key, formData.getAll(key).length > 1 ?
formData.getAll(key) : formData.get(key)
])
)

运行中的代码片段

var formData = new FormData(document.forms[0])


var obj = Object.fromEntries(Array.from(formData.keys()).map(key => [key, formData.getAll(key).length > 1 ? formData.getAll(key) : formData.get(key)]))


document.write(`<pre>${JSON.stringify(obj)}</pre>`)

<form action="#">
<input name="name" value="Robinson" />
<input name="items" value="Vin" />
<input name="items" value="Fromage" />
<select name="animals" multiple id="animals">
<option value="tiger" selected>Tigre</option>
<option value="turtle" selected>Tortue</option>
<option value="monkey">Singe</option>
</select>
</form>

小开

我认为这是从formData FormData对象中获得你想要的结果的最简单的方法:

const jsonData = {};


for(const [key, value] of formData) {
jsonData[key] = value;
}

小开

这对我有用。🙂 点击这里查看详细代码

let formToJson = function(){
let form = new FormData($("form#formData")[0]);
//console.log(form);
let jsonData = Object.fromEntries(form.entries());
//console.log(jsonData);
$("#jsonData").html(JSON.stringify(jsonData));
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<div class="">
<form action="#" method="post" id="formData">
<input type="text" name="fName" id="fName" value="Mad"><br>
<input type="text" name="lName" id="lName" value="Coder"><br>
<input type="button" onclick="formToJson()" value="Boom Yeah">
</form>
</div>
<div id="jsonData">
</div>
</body>
</html>

小开

如果你想要json字符串:

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

如果你想要一个json对象

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

小开

使用toJSON，如JSON.stringify ()中所述

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

这里有一个小技巧。

var fd = new FormData(document.forms[0]);


fd.toJSON = function() {
const o = {};
this.forEach((v, k) => {
v = this.getAll(k);
o[k] = v.length == 1 ? v[0] : (v.length >= 1 ? v : null);
});
return o;
};


document.write(`<pre>${JSON.stringify(fd)}</pre>`)

<form action="#">
<input name="name" value="Robinson" />
<input name="items" value="Vin" />
<input name="items" value="Fromage" />
<select name="animals" multiple id="animals">
<option value="tiger" selected>Tigre</option>
<option value="turtle" selected>Tortue</option>
<option value="monkey">Singe</option>
</select>
</form>

小开

这解决了我的问题，这是一个对象

const formDataObject = (formData) => {


for (const key in formData) {
if (formData[key].startsWith('{') || formData[key].startsWith('[')) {
try {
formData[key] = JSON.parse(formData[key]);
console.log("key is :", key, "form data is :", formData[key]);


} catch (error) {
console.log("error :", key);
}
}
}


console.log("object", formData)
}

小开

另一种适用于选择多个或具有相同name属性的输入的方法:

function form_to_json() {
const form_data = new FormData(document.querySelector('form'))
const uniqueKeys = [...new Set(form_data.keys())]
const obj = {}
uniqueKeys.forEach((value, key) => {
obj[value] = (form_data.getAll(value).length > 1) ? form_data.getAll(value) : form_data.get(value)
})
const json = JSON.stringify(obj)
alert(json)
}

<form>
<input type="text" name="name" value="Cesar"></br>
<select name="cars" id="cars" multiple>
<option value="volvo" selected>Volvo</option>
<option value="saab" selected>Saab</option>
</select>
<input type="button" onclick="form_to_json()" value="Ok">
</form>

小开

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

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

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

小开

下面是一个将formData对象转换为json字符串的函数。

适用于多个条目和嵌套数组。
适用于编号和命名的输入名称数组。

例如，你可以有以下表单字段:

<select name="select[]" multiple></select>
<input name="check[a][0][]" type="checkbox" value="test"/>

用法:

let json = form2json(formData);

功能:

function form2json(data) {
        

let method = function (object,pair) {
            

let keys = pair[0].replace(/\]/g,'').split('[');
let key = keys[0];
let value = pair[1];
            

if (keys.length > 1) {
                

let i,x,segment;
let last = value;
let type = isNaN(keys[1]) ? {} : [];
                

value = segment = object[key] || type;
                

for (i = 1; i < keys.length; i++) {
                    

x = keys[i];
                    

if (i == keys.length-1) {
if (Array.isArray(segment)) {
segment.push(last);
} else {
segment[x] = last;
}
} else if (segment[x] == undefined) {
segment[x] = isNaN(keys[i+1]) ? {} : [];
}
                    

segment = segment[x];
                    

}
                

}
            

object[key] = value;
            

return object;
            

}
        

let object = Array.from(data).reduce(method,{});
        

return JSON.stringify(object);
        

}

小开

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

小开

下面是一种包含处理多个值的简单方法的方法。如果一个键以[]结尾，它将这些值组合成一个数组(就像在旧的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"]}

小开

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

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

小开

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

两个主要区别:

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

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

下面是一个可以用这个函数实现的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;
}