如何将表单的所有元素转换为JavaScript对象?
我希望有某种方法从表单自动构建JavaScript对象,而不必遍历每个元素。我不希望使用$('#formid').serialize();返回的字符串;,我也不希望$('#formid').serializeArray()返回映射;
如何将表单的所有元素转换为JavaScript对象?
我希望有某种方法从表单自动构建JavaScript对象,而不必遍历每个元素。我不希望使用$('#formid').serialize();返回的字符串;,我也不希望$('#formid').serializeArray()返回映射;
当前回答
这是一个使用reduce的单行。Reduce是一个函数函数,它获取传递函数的返回值,并在下一次迭代中将其与列表中的第n个值一起传递回传递函数。
$('#formid').serializeArray().reduce((o,p) => ({...o, [p.name]: p.value}))
我们必须使用一些技巧来实现这一点:
…o(扩展语法)插入o中的所有键:值对包装我们在()中返回的对象,以将其与表示函数的{}区分开来将密钥(p.name)换行为[]
其他回答
此线程似乎已成为表单序列化的常见问题解答:)
我对PHP命名的看法:<input name=“user[name]”>
$('form').on('submit', function(ev) {
ev.preventDefault();
var obj = $(this).serializePHPObject();
// $.post('./', obj);
});
(function ($) {
// based on https://stackoverflow.com/a/25239999/1644202
// <input name="user[name]" >
$.fn.serializePHPObject = function () {
var obj = {};
$.each(this.serializeArray(), function (i, pair) {
var cObj = obj,
pObj,
cpName;
$.each(pair.name.split("["), function (i, pName) {
pName = pName.replace("]", "");
pObj = cObj;
cpName = pName;
cObj = cObj[pName] ? cObj[pName] : (cObj[pName] = {});
});
pObj[cpName] = pair.value;
});
return obj;
};
})(jQuery);
这里最简单。我用一个简单的字符串替换了一个正则表达式,到目前为止,它们就像一个符咒。我不是正则表达式专家,但我打赌您甚至可以填充非常复杂的对象。
var values = $(this).serialize(),
attributes = {};
values.replace(/([^&]+)=([^&]*)/g, function (match, name, value) {
attributes[name] = value;
});
如果使用Undercore.js,可以使用相对简洁的:
_.object(_.map($('#myform').serializeArray(), _.values))
这使用foreach方法迭代serializArray返回的名称和值对,然后使用名称作为键返回对象。
let formData = $(this).serializeArray();
let formObject = {}
formData.forEach(
x=>formObject.hasOwnProperty(x.name)?formObject[x.name]=[formObject[x.name],x.value].flat():formObject[x.name]=x.value
);
Javascript/jQuery一行代码-也适用于旧版本(ES6之前):
$('form').serializeArray().reduce((f,c) => {f[c['name']]=(f[c['name']])?[].concat(f[c['name']],c['value']):c['value']; return f}, {} );