JQuery – 将表单数据序列化到Associated Array
如何将HTML表单数据序列化为关联数组，而不是使用jQuery使用$ .serializeArray（）生成的数字索引格式？
jQuery.serializeArray给出的输出使得使用数字索引键直接选择值很困难。当在表单输入中使用复选框时，可能会发生轻微的索引转换。
serializeArray的输出
[ 0: [name: 'field-1', value: 'val1'], 1: [name: 'check', value: 'val2'], 2: [name: 'check', value: 'val3'] ] 期望的输出 – 更可靠的格式和更简单的价值访问
[ 'field-1' : 'val1', 'check' : [ 0 : 'val2', 1 : 'val3' ] ]
对我有用的解决方案是编写我自己的jQuery函数$ .serializeAssoc（）和$ .serializeObject（）替代方案，这些方法也可以处理来自表单上多选项的多维数组。
这两个function各有利弊; 我使用serializeAssoc来简化表单数据以进行直接通用值访问，通常在JS Validation中。
serializeObject使用自定义数字键索引对多function表单派上用场，简化从多选字段或表单的复杂表单设置提交的信息的数据配对，其中表单中的数据具有父子关系，DOM具有值， serializeAssoc无法很好地处理。
serializeAssoc
以下函数允许长度检查，但存在自定义数字键索引的问题，在AJAX调用中提交数组时，它会导致索引填充
$.fn.serializeAssoc = function() { var data = {}; $.each( this.serializeArray(), function( key, obj ) { var a = obj.name.match(/(.*?)\[(.*?)\]/); if(a !== null) { var subName = a[1]; var subKey = a[2]; if( !data[subName] ) { data[subName] = [ ]; } if (!subKey.length) { subKey = data[subName].length; } if( data[subName][subKey] ) { if( $.isArray( data[subName][subKey] ) ) { data[subName][subKey].push( obj.value ); } else { data[subName][subKey] = [ ]; data[subName][subKey].push( obj.value ); } } else { data[subName][subKey] = obj.value; } } else { if( data[obj.name] ) { if( $.isArray( data[obj.name] ) ) { data[obj.name].push( obj.value ); } else { data[obj.name] = [ ]; data[obj.name].push( obj.value ); } } else { data[obj.name] = obj.value; } } }); return data; };
serializeObject
以下函数允许自定义数字索引而不会导致填充但阻止长度检查。 如果需要，使用每个循环检查索引键计数。 如果在AJAX调用中提交对象，则必须首先使用JSON.Stringify并将var中的值传递给服务器端进行解码，因为直接使用会导致某些浏览器出现意外的行尾错误。
$.fn.serializeObject = function() { var data = {}; $.each( this.serializeArray(), function( key, obj ) { var a = obj.name.match(/(.*?)\[(.*?)\]/); if(a !== null) { var subName = new String(a[1]); var subKey = new String(a[2]); if( !data[subName] ) { data[subName] = { }; data[subName].length = 0; }; if (!subKey.length) { subKey = data[subName].length; } if( data[subName][subKey] ) { if( $.isArray( data[subName][subKey] ) ) { data[subName][subKey].push( obj.value ); } else { data[subName][subKey] = { }; data[subName][subKey].push( obj.value ); }; } else { data[subName][subKey] = obj.value; }; data[subName].length++; } else { var keyName = new String(obj.name); if( data[keyName] ) { if( $.isArray( data[keyName] ) ) { data[keyName].push( obj.value ); } else { data[keyName] = { }; data[keyName].push( obj.value ); }; } else { data[keyName] = obj.value; }; }; }); return data; };
用法：
添加function
样本表格
使用该function
动态表单示例
动态表单输出
[ myName: 'Spuggy', character: [ 0: 'Mario', 1: 'Sonic' ], console: [ 'xbox': 'XBOX One', 'playstation': 'PlayStation 4' ] ]