JQuery的 - 序列化表单数据关联数组 [英] JQuery - Serialize form data to Associated Array
问题描述
你怎么连载HTML表单数据到相关的阵列，而不是由$ .serializeArray（）使用jQuery？
产生的数字索引格式由jQuery.serializeArray给出的输出使得它很难直接使用数字索引键选择值，可以在复选框形式输入时可能会发生轻微的指数移动..
serializeArray的输出
[
0：[名：字段-1'，值：'VAL1']，
1：名称：'检查'，值：'val2的']，
2：名称：'检查'，值：'VAL3']
]
所需的输出 - 更可靠的格式和简单价值访问的
[
字段1：VAL1'，
检查：[0：'val2的'1：'VAL3']
]
解决方案为我工作就是写我自己的jQuery函数$ .serializeAssoc（）和$ .serializeObject（）的替代品也可以处理来自多选择多维数组在表格选项。
这两个函数都有各自的优点和缺点;
我用serializeAssoc简化形式的数据进行直接的通用价值访问，通常JS验证。
serializeObject已经派上用场，使用自定义数字键索引多功能的形式，简化了从多选字段或形式的复杂形式建立与DOM内置值提交的信息数据配对其中一个表单数据有家长和子关系，有事serializeAssoc不能处理得非常好。
serializeAssoc
的以下功能允许长度检查，但presents与定制数字键索引的问题，在提交阵列中的一个AJAX调用它会导致指数的填充的
$。fn.serializeAssoc =功能（）{
VAR数据= {};
$。每个（this.serializeArray（），功能（键，OBJ）{
VAR一个= obj.name.match（/(.*?)\\[(.*?)\\]/）;
如果（一个！== NULL）
{
变种SUBNAME =一个[1];
VAR子项= a [2];
如果（数据[SUBNAME]！）数据[SUBNAME] = [];
如果（数据[SUBNAME] [子项]）{
如果（$ .isArray（数据[SUBNAME] [子项]））{
数据[子名称] [子项] .push（obj.value）;
}其他{
数据[子名称] [子] = [];
数据[子名称] [子项] .push（obj.value）;
}
}其他{
数据[子名称] [子] = obj.value;
}
}其他{
如果（数据[obj.name]）{
如果（$ .isArray（数据[obj.name]））{
数据[obj.name] .push（obj.value）;
}其他{
数据[obj.name] = [];
数据[obj.name] .push（obj.value）;
}
}其他{
数据[obj.name] = obj.value;
}
}
}）;
返回的数据;
};
serializeObject
的以下功能低于允许自定义数字指标，而不会造成填充，但prevents长度检查。检查是否需要使用每个循环索引键计数。如果一个AJAX提交对象调用必须首先使用JSON.Stringify并在VAR传递值为德codeD服务器端直接使用会导致线路故障的一些浏览器的意外结束。的
$。fn.serializeObject =功能（）{
VAR数据= {};
$。每个（this.serializeArray（），功能（键，OBJ）{
VAR一个= obj.name.match（/(.*?)\\[(.*?)\\]/）;
如果（一个！== NULL）
{
VAR SUBNAME =新的字符串（[1]）;
VAR子=新的字符串（[2]）;
（！数据[SUBNAME]），如果数据[SUBNAME] = {};
如果（数据[SUBNAME] [子项]）{
如果（$ .isArray（数据[SUBNAME] [子项]））{
数据[子名称] [子项] .push（obj.value）;
}其他{
数据[子名称] [子] = {};
数据[子名称] [子项] .push（obj.value）;
};
}其他{
数据[子名称] [子] = obj.value;
};
}其他{
VAR的keyName =新的String（obj.name）;
如果（数据[的keyName]）{
如果（$ .isArray（数据[的keyName]））{
数据[的keyName] .push（obj.value）;
}其他{
数据[的keyName] = {};
数据[的keyName] .push（obj.value）;
};
}其他{
数据[的keyName] = obj.value;
};
};
}）;
返回的数据;
};
用法：
的添加功能的
＆LT;脚本＆GT;
（函数（$）{
$ .fn.serializeAssoc =功能（）{
......至于$ P $以上psented ...
};
$ .fn.serializeObject =功能（）{
......至于$ P $以上psented ...
};
}）（jQuery的）;
＆LT; / SCRIPT＆GT;
的表格样本的
＆LT;表ID =myForm会＆GT;
＆LT;输入类型=文本名称=MYNAME/＆GT; ＆LT;选择名称=游戏机多＆GT;
＆LT;选项选择个PC＆LT; /选项＆GT;
＆LT;选项选择＆GT; XBOX 360°; /选项＆GT;
＆LT;选项选择＆GT;＆PS3 LT; /选项＆GT;
＆LT; /选择＆GT; ＆LT;输入类型=文本名称=样本[100]VALUE =马里奥/＆GT;
＆LT;输入类型=文本名称=样本[101]VALUE =兄弟/＆GT; ＆LT;输入类型=提交名称=提交值=提交/＆GT;
＆LT; /表及GT;
的使用功能的
＆LT;脚本＆GT;
（函数（$）{
$（'＃myForm的'）。提交（函数（五）{
亦即preventDefault（）;
VAR FORMDATA = $（'＃myForm的'）serializeAssoc（）。
的console.log（FORMDATA）;
}）;
}）（jQuery的）;
＆LT; / SCRIPT＆GT;
How do you serialise HTML form data to an Associated Array as opposed to the numeric index format produced by $.serializeArray() using jQuery?
The output given by jQuery.serializeArray makes it difficult to directly select values using a numeric index key, Slight index shifts can occur when check boxes are used in form input..
Output of serializeArray
[
0: [name: 'field-1', value: 'val1'],
1: [name: 'check', value: 'val2'],
2: [name: 'check', value: 'val3']
]
Desired Output - More reliable format and simpler value access
[
'field-1' : 'val1',
'check' : [ 0 : 'val2', 1 : 'val3' ]
]
Solution that worked for me was to write my own jQuery functions $.serializeAssoc() and $.serializeObject() alternatives that could also handle multidimensional arrays from multi selection options on forms.
These two functions have their pros and cons; I use serializeAssoc to simplify form data for direct generic value access, typically in JS Validation.
serializeObject has come in handy with multifunction forms using custom numeric key indexes, Simplifying data paring of information submitted from a complicated form set-up of multi-selection fields or forms with values built by DOM where data in a form has parent and child relationships, something serializeAssoc can't handle very well.
serializeAssoc
Following function allows length checks but presents problems with custom numeric key indexes, When submitting the array in an AJAX call it causes index padding
$.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( 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
Following function below allows custom numeric indexes without causing padding but prevents length check. Check index key counts using an each loop if required. If submitting the object in an AJAX call you must first use JSON.Stringify and pass the value in a var to be decoded server side as direct usage causes an Unexpected end of line error in some browsers.
$.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] = { };
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 {
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;
};
Usage:
Adding the function
<script>
(function($){
$.fn.serializeAssoc = function() {
... As Presented Above ...
};
$.fn.serializeObject = function() {
... As Presented Above ...
};
})(jQuery);
</script>
Sample Form
<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>
Using the function
<script>
(function($) {
$('#myForm').submit(function(e){
e.preventDefault();
var formData = $('#myForm').serializeAssoc();
console.log(formData);
});
})(jQuery);
</script>
这篇关于JQuery的 - 序列化表单数据关联数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
