我如何将条目从HTML5 FormData对象转换为JSON?
解决方案不应该使用jQuery。而且，它不应该简单地序列化整个FormData对象，而应该只序列化它的键/值条目。
当前回答
你可以试试这个
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);
}
其他回答
你可以试试这个
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);
}
对于我的目的，包括多选，如复选框，这是很好的:
JSON.stringify(Array.from((new FormData(document.querySelector('form'))).entries()).reduce((map = {}, [key, value]) => {
return {
...map,
[key]: map[key] ? [...map[key], value] : value,
};
}, {}));
这里有一种更函数化的方式，不需要使用库。
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>
2019年，这种任务变得超级简单。
JSON.stringify(Object.fromEntries(formData));
Object.fromEntries:支持Chrome 73+， Firefox 63+， Safari 12.1
正如评论中提到的，请注意:FormData可以包含多个具有相同键的值(例如具有相同名称的复选框)。fromentries()丢弃重复项，只保留最后一个。
使用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>
