如何将表单的所有元素转换为JavaScript对象？
我希望有某种方法从表单自动构建JavaScript对象，而不必遍历每个元素。我不希望使用$（'#formid'）.serialize（）；返回的字符串；，我也不希望$（'#formid'）.serializeArray（）返回映射；
当前回答
我最近遇到了同样的问题，并推出了这个.toJSONjQuery插件，它将表单转换为具有相同结构的JSON对象。这对于动态生成的表单也特别有用，因为您希望用户在特定位置添加更多字段。
重点是你可能实际上想要构建一个表单，这样它本身就有一个结构，所以让我们假设你想要创建一个用户在城镇中插入他最喜欢的位置的表单：你可以想象这个表单代表一个<places></places>XML元素，包含用户喜欢的位置列表，因此是<place>列表</place>元素，每个元素包含例如＜name＞</name＞元素，一个＜type＞</type>元素，然后是<activity>列表</activity>元素来表示您可以在这样的地方执行的活动。因此，您的XML结构如下所示：
<places>
<place>
<name>Home</name>
<type>dwelling</type>
<activity>sleep</activity>
<activity>eat</activity>
<activity>watch TV</activity>
</place>
<place>...</place>
<place>...</place>
</places>
如果有一个JSON对象来表示这个精确的结构，那该有多酷，这样你就可以：
将此对象原样存储在任何类似CouchDB的数据库中从$_POST[]服务器端读取它，并检索一个正确的嵌套数组，然后可以对其进行语义操作使用一些服务器端脚本将其转换为格式良好的XML文件（即使您事先不知道其确切结构）在任何类似Node.js的服务器脚本中使用它
好的，现在我们需要考虑表单如何表示XML文件。
当然，＜form＞标记是根，但是我们有一个＜place＞元素，它是一个容器，而不是数据元素本身，所以我们不能为它使用输入标记。
这里是<fieldset>标记的用武之地！我们将使用＜fieldset＞标记来表示表单/XML表示中的所有容器元素，因此得到如下结果：
<form name="places">
<fieldset name="place">
<input type="text" name="name"/>
<select name="type">
<option value="dwelling">Dwelling</option>
<option value="restoration">Restoration</option>
<option value="sport">Sport</option>
<option value="administrative">Administrative</option>
</select>
<input type="text" name="activity"/>
<input type="text" name="activity"/>
<input type="text" name="activity"/>
</fieldset>
</form>
正如您在这个表单中看到的，我们打破了唯一名称的规则，但这是可以的，因为它们将被转换为一个元素数组，因此只能由数组中的索引引用。
此时，您可以看到表单中没有类似于name=“array[]”的名称，而且一切都很漂亮、简单、语义。
现在我们希望将此表单转换为JSON对象，该对象如下所示：
{'places':{
'place':[
{
'name': 'Home',
'type': 'dwelling',
'activity':[
'sleep',
'eat',
'watch TV'
]
},
{...},
{...}
]
}}
为了做到这一点，我在这里开发了一个jQuery插件，有人在这个CodeReview线程中帮助优化了这个插件，看起来像这样：
$.fn.toJSO = function () {
var obj = {},
$kids = $(this).children('[name]');
if (!$kids.length) {
return $(this).val();
}
$kids.each(function () {
var $el = $(this),
name = $el.attr('name');
if ($el.siblings("[name=" + name + "]").length) {
if (!/radio|checkbox/i.test($el.attr('type')) || $el.prop('checked')) {
obj[name] = obj[name] || [];
obj[name].push($el.toJSO());
}
} else {
obj[name] = $el.toJSO();
}
});
return obj;
};
我还写了一篇博文来解释这一点。
这会将表单中的所有内容转换为JSON（甚至是单选和复选框），您只需调用
$.post('script.php',('form').toJSO(), ...);
我知道有很多方法可以将表单转换为JSON对象，当然.serialize（）和.serializeArray（）在大多数情况下都非常有效，而且主要是为了使用，但我认为将表单编写为具有有意义名称的XML结构并将其转换为格式良好的JSON对象的整个想法值得一试，如果您需要检索动态生成的表单数据，那么可以添加同名输入标记而不必担心这一事实也非常有用。
我希望这对某人有所帮助！
其他回答
这会把一切都考虑在内
函数formToObject（表单）{let data=新FormData（表单）；let queryString=新URLSearchParams（data）.toString（）；var obj={}；var params=queryString.split（“&”）；对于（var i=0；i<params.length；i++）{var param=params[i].split（“=”）；var key=param[0].replace（“[]”，“”）；var key=密钥.替换（“%5B%5 D”，“”）；var值=参数[1]；if（obj[key]==未定义）{obj[key]=值；}else if（数组的obj[key]实例）{obj[key].push（值）；}其他{obj[key]=[obj[key]，值]；}}控制台日志（obj）返回obj；}<!DOCTYPE html><html><head><title>表单示例</title></head><body style=“height:800px；溢出：滚动”><form id=“test”onchange=“formToObject（this）”><div><h3>水果</h3><input type=“checkbox”name=“fruit”value=“apple”id=“apple“><label for=“apple”>Apfel</label><input-type=“checkbox”name=“fruit”value=“banana”id=“banana“><label for=“banana”>Banane</label><input type=“checkbox”name=“fruit”value=“cherry”id=“cherr”><label for=“cherry”>Kirsche</label><input type=“checkbox”name=“fruit”value=“葡萄”id=“葡萄”><label for=“葡萄”>Traube</label><input type=“checkbox”name=“fruit”value=“pear”id=“pear“><label for=“pear”>Birne</label></div><div><h3>多个选项</h3><select multiple name=“manyOptions[]”><option value=“选项1”>选项1</option><option value=“option 2”>选项2</option><option value=“选项3”>选项3</option></选择></div>＜div＞＜h3＞检查选项</h3><input type=“radio”name=“onceOption”value=“Option 1”>选项1<br><input type=“radio”name=“onceOption”value=“Option 2”>选项2<br><input type=“radio”name=“onceOption”value=“Option 3”>选项3<br></div></form></body></html>
我的库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（））；
Tobias上面的解决方案是正确的，但是正如评论者@macek所指出的，它不处理foo[bar]类型的输入并将其拆分为子对象。
这是一个PHP独有的特性，但我仍然觉得能够在JavaScript中生成相同的结构非常有用。
我只是修改了上面托拜厄斯的代码，所以所有的功劳都归于他。这可能会变得更干净，但我只是在五分钟内把它搅拌起来，并认为它可能有用。
此时它不处理多维数组或数字索引数组。也就是说，它只能使用foo[bar]而不能使用foo[]。
jQuery.fn.serializeObjectPHP = function()
{
var o = {};
var re = /^(.+)\[(.*)\]$/;
var a = this.serializeArray();
var n;
jQuery.each(a, function() {
var name = this.name;
if ((n = re.exec(this.name)) && n[2]) {
if (o[n[1]] === undefined) {
o[n[1]] = {};
o[n[1]][n[2]] = this.value || '';
} else if (o[n[1]][n[2]] === undefined) {
o[n[1]][n[2]] = this.value || '';
} else {
if(!o[n[1]][n[2]].push) {
o[n[1]][n[2]] = [ o[n[1]][n[2]] ];
}
o[n[1]][n[2]].push(this.value || '');
}
} else {
if (n && !n[2]) {
name = n[1];
}
if (o[name] !== undefined) {
if (!o[name].push) {
o[name] = [o[name]];
}
o[name].push(this.value || '');
} else {
o[name] = this.value || '';
}
}
});
return o;
};
【2020年更新】
在vanilla js中有一个简单的oneliner，它利用了fromEntries（一如既往，请检查浏览器支持）：
Object.fromEntries(new FormData(form))
好的，我知道这个问题已经有了一个高票的答案，但最近又有人问了一个类似的问题，我也被导向这个问题。我也想提供我的解决方案，因为它比公认的解决方案有一个优势：可以包含禁用的表单元素（这有时很重要，取决于UI的功能）
以下是我对另一个SO问题的回答：
最初，我们使用的是jQuery的serializeArray（）方法，但这不包括禁用的表单元素。我们通常会禁用与页面上其他源“同步”的表单元素，但我们仍然需要在序列化对象中包含数据。因此serializeArray（）已过时。我们使用：input选择器获取给定容器中的所有输入元素（启用和禁用），然后使用$.map（）创建对象。
var inputs = $("#container :input");
var obj = $.map(inputs, function(n, i)
{
var o = {};
o[n.name] = $(n).val();
return o;
});
console.log(obj);
请注意，要使其工作，每个输入都需要一个name属性，该属性将是生成对象的属性的名称。
这实际上与我们使用的略有不同。我们需要创建一个结构化为.NET IDictionary的对象，所以我们使用了这个：（我在这里提供它，以防有用）
var obj = $.map(inputs, function(n, i)
{
return { Key: n.name, Value: $(n).val() };
});
console.log(obj);
我喜欢这两种解决方案，因为它们都是$.map（）函数的简单用法，并且您可以完全控制选择器（因此，您最终会在结果对象中包含哪些元素）。此外，不需要额外的插件。普通的旧jQuery。
