我如何将条目从HTML5 FormData对象转换为JSON?
解决方案不应该使用jQuery。而且，它不应该简单地序列化整个FormData对象，而应该只序列化它的键/值条目。
当前回答
如果您正在使用lodash，可以使用fropairs简单地完成
import {fromPairs} from 'lodash';
const object = fromPairs(Array.from(formData.entries()));
其他回答
我没有看到提到FormData。方法。
除了从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>
为我工作
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);
下面是一种包含处理多个值的简单方法的方法。如果一个键以[]结尾，它将值组合成一个数组(就像在旧的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"]}
尽管来自@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,
}), {})
使用JSON.stringify()中描述的toJSON
如果值具有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>
