我如何将条目从HTML5 FormData对象转换为JSON?
解决方案不应该使用jQuery。而且，它不应该简单地序列化整个FormData对象，而应该只序列化它的键/值条目。
当前回答
这里有一种更函数化的方式，不需要使用库。
Array.from(formData.entries()).reduce((memo, [key, value]) => ({
...memo,
[key]: value,
}), {});
例子:
. getelementbyid(“foobar”)。addEventListener('submit'， (e) => { e.preventDefault (); const formData = new formData (e.target); const data = Array.from(formData.entries()).reduce((memo， [key, value]) => ({ 备忘录, (例子):值, }, {}); . getelementbyid(“输出”)。innerHTML = JSON.stringify(数据); })； <形式id =“foobar”> <input name='baz' /> <input type='submit' /> > < /形式 <pre id='output'>输入一些值并提交</pre>
其他回答
编辑:我看到已经有一个答案得出了非常相似的结果。
两个主要区别:
这不会将数值键作为数组下标，而是将它们视为对象键。可能不是正确的行为，但我个人从来没有写过使用这种符号的表单，可能会更新它。 这不是一个递归函数，这显然不是一个有利或不利的问题
忽略任何缺乏效率的问题。这将处理无限嵌套和数组的重复键。这显然不会转换文件之类的东西，但我不需要它，所以我没有添加它。
下面是一个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;
}
多年后的香草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 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>
的一行程序!
Array.from(fd).reduce((obj, [k, v]) => ({...obj, [k]: v}), {});
今天我了解到firefox有对象扩展支持和数组解构!
这里有一种更函数化的方式，不需要使用库。
Array.from(formData.entries()).reduce((memo, [key, value]) => ({
...memo,
[key]: value,
}), {});
例子:
. getelementbyid(“foobar”)。addEventListener('submit'， (e) => { e.preventDefault (); const formData = new formData (e.target); const data = Array.from(formData.entries()).reduce((memo， [key, value]) => ({ 备忘录, (例子):值, }, {}); . getelementbyid(“输出”)。innerHTML = JSON.stringify(数据); })； <形式id =“foobar”> <input name='baz' /> <input type='submit' /> > < /形式 <pre id='output'>输入一些值并提交</pre>
