如何将表单的所有元素转换为JavaScript对象？
我希望有某种方法从表单自动构建JavaScript对象，而不必遍历每个元素。我不希望使用$（'#formid'）.serialize（）；返回的字符串；，我也不希望$（'#formid'）.serializeArray（）返回映射；
当前回答
【2020年更新】
在vanilla js中有一个简单的oneliner，它利用了fromEntries（一如既往，请检查浏览器支持）：
Object.fromEntries(new FormData(form))
其他回答
不使用JQuery序列化深度嵌套表单
在花了几天时间寻找这个没有依赖关系的问题的解决方案之后，我决定使用FormDataAPI制作一个非jQuery表单数据序列化程序。
序列化程序中的逻辑很大程度上基于jQuery插件jQueryBBQ中的de-param函数，然而，在这个项目中，所有依赖项都被删除了。
这个项目可以在NPM和Github上找到：
https://github.com/GistApps/deep-serialize-form
https://www.npmjs.com/package/deep-serialize-form
function deepSerializeForm(form) {
var obj = {};
var formData = new FormData(form);
var coerce_types = { 'true': !0, 'false': !1, 'null': null };
/**
* Get the input value from the formData by key
* @return {mixed}
*/
var getValue = function(formData, key) {
var val = formData.get(key);
val = val && !isNaN(val) ? +val // number
: val === 'undefined' ? undefined // undefined
: coerce_types[val] !== undefined ? coerce_types[val] // true, false, null
: val; // string
return val;
}
for (var key of formData.keys()) {
var val = getValue(formData, key);
var cur = obj;
var i = 0;
var keys = key.split('][');
var keys_last = keys.length - 1;
if (/\[/.test(keys[0]) && /\]$/.test(keys[keys_last])) {
keys[keys_last] = keys[keys_last].replace(/\]$/, '');
keys = keys.shift().split('[').concat(keys);
keys_last = keys.length - 1;
} else {
keys_last = 0;
}
if ( keys_last ) {
for (; i <= keys_last; i++) {
key = keys[i] === '' ? cur.length : keys[i];
cur = cur[key] = i < keys_last
? cur[key] || (keys[i+1] && isNaN(keys[i+1]) ? {} : [])
: val;
}
} else {
if (Array.isArray(obj[key])) {
obj[key].push( val );
} else if (obj[key] !== undefined) {
obj[key] = [obj[key], val];
} else {
obj[key] = val;
}
}
}
return obj;
}
window.deepSerializeForm = deepSerializeForm;
这和你想要的完全一样
仅执行以下代码一次
$.fn.serializeObject = function(){
let d={};
$(this).serializeArray().forEach(r=>d[r.name]=r.value);
return d;
}
现在您可以多次执行以下行
let formObj = $('#myForm').serializeObject();
// will return like {id:"1", username:"abc"}
我的库phery中的代码有一个序列化例程，可以处理非常复杂的表单（如演示中所示https://github.com/pocesar/phery/blob/master/demo.php#L1664），而且不是一刀切。它实际上检查每个字段的类型。例如，单选框与范围不同，与keygen不同，与select multiple不同。我的功能涵盖了这一切，你可以看到它在https://github.com/pocesar/phery/blob/master/phery.js#L1851.
serializeForm:function (opt) {
opt = $.extend({}, opt);
if (typeof opt['disabled'] === 'undefined' || opt['disabled'] === null) {
opt['disabled'] = false;
}
if (typeof opt['all'] === 'undefined' || opt['all'] === null) {
opt['all'] = false;
}
if (typeof opt['empty'] === 'undefined' || opt['empty'] === null) {
opt['empty'] = true;
}
var
$form = $(this),
result = {},
formValues =
$form
.find('input,textarea,select,keygen')
.filter(function () {
var ret = true;
if (!opt['disabled']) {
ret = !this.disabled;
}
return ret && $.trim(this.name);
})
.map(function () {
var
$this = $(this),
radios,
options,
value = null;
if ($this.is('[type="radio"]') || $this.is('[type="checkbox"]')) {
if ($this.is('[type="radio"]')) {
radios = $form.find('[type="radio"][name="' + this.name + '"]');
if (radios.filter('[checked]').size()) {
value = radios.filter('[checked]').val();
}
} else if ($this.prop('checked')) {
value = $this.is('[value]') ? $this.val() : 1;
}
} else if ($this.is('select')) {
options = $this.find('option').filter(':selected');
if ($this.prop('multiple')) {
value = options.map(function () {
return this.value || this.innerHTML;
}).get();
} else {
value = options.val();
}
} else {
value = $this.val();
}
return {
'name':this.name || null,
'value':value
};
}).get();
if (formValues) {
var
i,
value,
name,
$matches,
len,
offset,
j,
fields;
for (i = 0; i < formValues.length; i++) {
name = formValues[i].name;
value = formValues[i].value;
if (!opt['all']) {
if (value === null) {
continue;
}
} else {
if (value === null) {
value = '';
}
}
if (value === '' && !opt['empty']) {
continue;
}
if (!name) {
continue;
}
$matches = name.split(/\[/);
len = $matches.length;
for (j = 1; j < len; j++) {
$matches[j] = $matches[j].replace(/\]/g, '');
}
fields = [];
for (j = 0; j < len; j++) {
if ($matches[j] || j < len - 1) {
fields.push($matches[j].replace("'", ''));
}
}
if ($matches[len - 1] === '') {
offset = assign_object(result, fields, [], true, false, false);
if (value.constructor === Array) {
offset[0][offset[1]].concat(value);
} else {
offset[0][offset[1]].push(value);
}
} else {
assign_object(result, fields, value);
}
}
}
return result;
}
它是我的库phery的一部分，但可以移植到您自己的项目中。它在应该有数组的地方创建数组，从select、normalize复选框等选项中获取正确的选择选项。如果要将其转换为JSON（真正的JSON字符串），只需执行JSON.stringify（$（'form'）.serializeForm（））；
在不检查每个元素的情况下，确实无法做到这一点。您真正想知道的是“是否有其他人已经编写了一个将表单转换为JSON对象的方法？”类似于下面的内容应该可以工作——请注意，它只会为您提供通过POST返回的表单元素（必须有名称）。这是未测试的。
function formToJSON( selector )
{
var form = {};
$(selector).find(':input[name]:enabled').each( function() {
var self = $(this);
var name = self.attr('name');
if (form[name]) {
form[name] = form[name] + ',' + self.val();
}
else {
form[name] = self.val();
}
});
return form;
}
此线程似乎已成为表单序列化的常见问题解答：）
我对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);
