如何将HTML表单数据序列化为关联数组而不是$ .serializeArray()使用jQuery生成的数字索引格式?
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' ]
]
答案 0 :(得分:6)
对我有用的解决方案是编写我自己的jQuery函数$ .serializeAssoc()和$ .serializeObject()替代方案,它们也可以处理表单上多选项的多维数组。
这两个功能各有利弊; 我使用serializeAssoc来简化表单数据以进行直接通用值访问,通常在JS Validation中。
使用自定义数字键索引的多功能表单使用了序列化对象,简化了从多选字段或表单的复杂表单设置提交的信息的数据配对,其中表单中的数据具有父级和子关系,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;
};
<强>用法:强>
添加功能
<script>
(function($){
$.fn.serializeAssoc = function() {
... As Presented Above ...
};
$.fn.serializeObject = function() {
... As Presented Above ...
};
})(jQuery);
</script>
示例表格
<form id="myForm">
<input type="text" name="myName" />
<select name="consoles" multiple>
<option selected>PC</option>
<option selected>XBOX 360</option>
<option selected>PS3</option>
</select>
<input type="text" name="sample[100]" value="Mario" />
<input type="text" name="sample[101]" value="Brothers" />
<input type="submit" name="submit" value="Submit" />
</form>
使用功能
<script>
(function($) {
$('#myForm').submit(function(e){
e.preventDefault();
var formData = $('#myForm').serializeAssoc();
console.log(formData);
});
})(jQuery);
</script>
动态表单示例
<form id="myForm">
<input type="text" name="myName" value="Spuggy" />
<div id="characters">
<input type="text" name="character[]" value="Mario" />
<input type="text" name="character[]" value="Sonic" />
</div>
<div id="consoles">
<input type="text" name="console[xbox]" value="XBOX One" />
<input type="text" name="console[playstation]" value="PlayStation 4" />
</div>
<input type="submit" name="submit" value="Submit" />
</form>
<script>
(function($) {
$('#myForm').submit(function(e){
e.preventDefault();
var formData = $('#myForm').serializeAssoc();
console.log(formData);
});
})(jQuery);
</script>
动态表单输出
[
myName: 'Spuggy',
character: [
0: 'Mario',
1: 'Sonic'
],
console: [
'xbox': 'XBOX One',
'playstation': 'PlayStation 4'
]
]