如何将表单的所有元素转换为JavaScript对象？
我希望有某种方法从表单自动构建JavaScript对象，而不必遍历每个元素。我不希望使用$（'#formid'）.serialize（）；返回的字符串；，我也不希望$（'#formid'）.serializeArray（）返回映射；
当前回答
我检查了所有其他答案是否存在问题，如果输入名称是数组，例如name[key]，那么应该这样生成：
名称：｛key:value｝
例如：如果您的HTML表单与下面的表单类似：
<form>
<input name="name" value="value" >
<input name="name1[key1]" value="value1" >
<input name="name2[key2]" value="value2" >
<input name="name3[key3]" value="value3" >
</form>
但是它应该像下面的JSON一样生成，而不是像下面这样的对象和所有其他答案。因此，如果有人想带来类似以下JSON的内容，请尝试下面的JS代码。
{
name : 'value',
name1 : { key1 : 'value1' },
name2 : { key2 : 'value2' },
name3 : { key2 : 'value2' }
}
$.fn.getForm2obj=函数（）{var_={}；$.map（this.serializeArray（），函数（n）{常量键=n.name.match（/[a-zA-Z0-9_]+|（？=\[\]）/g）；如果（按键长度>1）{让tmp=_；pop=keys.pop（）；for（设i=0；i<keys.length，j=keys[i]；i++）{tmp[j]=（！tmp[j]？（pop==''）？[]：｛｝：tmp[j]），tmp=tmp[j]；}如果（pop==''）tmp=（！Array.isArray（tmp）？[]：tmp）、tmp.push（n.value）；否则tmp[pop]=n.value；}else_[keys.pop（）]=n.value；});返回_；}console.log（$（'form'）.getForm2obj（））；$（'form input'）.change（函数（）{console.clear（）；console.log（$（'form'）.getForm2obj（））；});<script src=“https://code.jquery.com/jquery-3.2.1.min.js“></script><表单><input name=“name”value=“value”><input type=“checkbox”name=“name1[]”value=“1”checked=“checked”>1<input type=“checkbox”name=“name1[]”value=“2”>2<input-type=“checkbox”name=“name1[]”value=“3”>3<br><input-type=“radio”name=“gender”value=“male”checked=“checked”>男性<input-type=“radio”name=“gender”value=“female”>女性<input name=“name2[key1]”value=“value1”><input name=“一个[另一个][另一个]”value=“value4”><input name=“name3[1][name]”value=“value4”><input name=“name3[2][name]”value=“value4”><input name=“[]”value=“value5”></form>
其他回答
我编写了一个jQuery模块jsForm，即使对于非常复杂的表单（也允许集合和其他更复杂的结构），它也可以实现这种双向。
它使用字段的名称（加上一些用于集合的特殊类）并匹配JSON对象。它允许自动复制用于收集和数据处理的DOM元素：
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://raw.github.com/corinis/jsForm/master/src/jquery.jsForm.js"></script>
<script>
$(function(){
// Some JSON data
var jsonData = {
name: "TestName", // Standard inputs
description: "long Description\nMultiline", // Textarea
links: [{href:'http://stackoverflow.com',description:'StackOverflow'}, {href:'http://www.github.com', description:'GitHub'}], // Lists
active: true, // Checkbox
state: "VISIBLE" // Selects (enums)
};
// Initialize the form, prefix is optional and defaults to data
$("#details").jsForm({
data:jsonData
});
$("#show").click(function() {
// Show the JSON data
alert(JSON.stringify($("#details").jsForm("get"), null, " "));
});
});
</script>
</head>
<body>
<h1>Simpel Form Test</h1>
<div id="details">
Name: <input name="data.name"/><br/>
<input type="checkbox" name="data.active"/> active<br/>
<textarea name="data.description"></textarea><br/>
<select name="data.state">
<option value="VISIBLE">visible</option>
<option value="IMPORTANT">important</option>
<option value="HIDDEN">hidden</option>
</select>
<fieldset>
<legend>Links</legend>
<ul class="collection" data-field="data.links">
<li><span class="field">links.description</span> Link: <input name="links.href"/> <button class="delete">x</button></li>
</ul>
</fieldset>
<button class="add" data-field="data.links">add a link</button><br/>
Additional field: <input name="data.addedField"/>
</div>
<button id="show">Show Object</button>
</body>
</html>
在不检查每个元素的情况下，确实无法做到这一点。您真正想知道的是“是否有其他人已经编写了一个将表单转换为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;
}
function serializedArray2Object(array){
let obj = {};
array.forEach(function(item){
if(obj[item['name']] === undefined){
obj[item['name']] = item['value'];
}else if(Array.isArray(obj[item['name']])){
obj[item['name']] = [...obj[item['name']],item['value']]
}else{
obj[item['name']] = [obj[item['name']],item['value']];
}
});
return obj;
}
使用
serializedArray2Object($('#form').serializeArray())
我刚刚从jQuery中发现了这个函数，并编写了一个到对象的转换器，这样数组就变成了一个对象。
serialize函数将JSON对象作为参数并返回serialize String。
function serialize(object) {
var _SPECIAL_CHARS = /[\\\"\x00-\x1f\x7f-\x9f\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g, _CHARS = {
'\b' : '\\b',
'\t' : '\\t',
'\n' : '\\n',
'\f' : '\\f',
'\r' : '\\r',
'"' : '\\"',
'\\' : '\\\\'
}, EMPTY = '', OPEN_O = '{', CLOSE_O = '}', OPEN_A = '[', CLOSE_A = ']', COMMA = ',', COMMA_CR = ",\n", CR = "\n", COLON = ':', space = "", COLON_SP = ': ', stack = [], QUOTE = '"';
function _char(c) {
if (!_CHARS[c]) {
_CHARS[c] = '\\u' + ('0000' + (+(c.charCodeAt(0))).toString(16))
.slice(-4);
}
return _CHARS[c];
}
function _string(s) {
return QUOTE + s.replace(_SPECIAL_CHARS, _char) + QUOTE;
// return str.replace('\"','').replace('\"','');
}
function serialize(h, key) {
var value = h[key], a = [], colon = ":", arr, i, keys, t, k, v;
arr = value instanceof Array;
stack.push(value);
keys = value;
i = 0;
t = typeof value;
switch (t) {
case "object" :
if(value==null){
return null;
}
break;
case "string" :
return _string(value);
case "number" :
return isFinite(value) ? value + EMPTY : NULL;
case "boolean" :
return value + EMPTY;
case "null" :
return null;
default :
return undefined;
}
arr = value.length === undefined ? false : true;
if (arr) { // Array
for (i = value.length - 1; i >= 0; --i) {
a[i] = serialize(value, i) || NULL;
}
}
else { // Object
i = 0;
for (k in keys) {
if (keys.hasOwnProperty(k)) {
v = serialize(value, k);
if (v) {
a[i++] = _string(k) + colon + v;
}
}
}
}
stack.pop();
if (space && a.length) {
return arr
? "[" + _indent(a.join(COMMA_CR), space) + "\n]"
: "{\n" + _indent(a.join(COMMA_CR), space) + "\n}";
}
else {
return arr ? "[" + a.join(COMMA) + "]" : "{" + a.join(COMMA)
+ "}";
}
}
return serialize({
"" : object
}, "");
}
此代码适用于我：
var data = $('#myForm input, #myForm select, #myForm textarea').toArray().reduce(function (m, e) {
m[e.name] = $(e).val();
return m;
}, {});
