jQuery serializeArray()方法改写多维对象以及自定义

时间:2022-07-14 22:02:30

jQuery客户端表单数据获取

  jq在进行客户端表单数据获取我们通常用serialize或者是serizlizeArray(),两种方法,可是在serizlizeArray()返回的数据是一个数组,数组里分别对应的是每个对象,如下

[{
name:
'sex', //表单name值
value: '' //表单value值
},
{
name:
'age', //表单name值
value: '12' //表单value值
}]

但是这有时候会满足不了我们的需求,有时候我们需要分组的时候,我们可以根据name值的命名来进行分组多维,例如

<form id="test_form">
面板分类:
<select name="面板分类"><option value="开关">开关</option><option value="插座">插座</option></select>
子项分类:
<select name="子项分类-开关"><option value="单控开关">单控开关</option><option value="双控开关">双控开关</option></select>
子项分类:
<select name="子项分类-插座"><option value="三孔插座">三孔插座</option><option value="五孔插座">五孔插座</option></select>
</form>

用我写的函数就可以实现如下结果

{
面板分类:
"开关"
子项分类:{
开关:
"单控开关",
插座:
"五孔插座"
}
}

示例2:

<form action="" id="test_form3">
<input type="text" name="吊杆-规格" value="ø6">
<input type="text" name="吊杆-间距" value="900">
<input type="text" name="吊杆-天宫库" value="data:JAHSHDJKAHDJFAS">
<input type="checkbox" checked="checked" name="主龙骨-值" value="true">
<input type="text" name="主龙骨-间距" value="800">
</form>

返回

{
吊杆:{
规格:
"ø6",
间距:
"900",
天宫库:
"data:JAHSHDJKAHDJFAS"
},
主龙骨:{
值:
"true",
间距:
"800"
}
}

方法如下,第一个参数是表单id,第二个是是否返回json数据,第三个处理完的回调函数

/**
* --- 表单数据接收格式化 ---
* @param1 form_id* 表单id
* @param2 boolean false 是否返回json数据,默认为false
* @param3 callback 回调函数,参数是返回的obj||json, 处理完数据调用自定义方法
* @return obj||json
*/
var customSerialize = function(form, json, callback) {
var arr = $('#' + form).serializeArray();
var tmp = {};
var res2 = {};
//处理array
$.each(arr, function(k, v) {
tmp[v.name]
= v.value;
});
$.each(tmp, function(k, v) {
res2[k]
= v;
});
$.each(res2, function(k, v) {
var path = k.split('-');
var k2 = path.pop();
var next_node = res2;
$.each(path, function(k2, node) {
if (!next_node[node]) next_node[node] = {};
next_node
= next_node[node];
});
next_node[k2]
= v;
});
if (arguments[1] && arguments[1] == true) {
var json = JSON.stringify(res2);
if (callback) callback(json);
return json;
}
else {
if (callback) callback(res2);
return res2;
}
}

用途

   在一些不用服务器需要跟js进行交互的环境中,如 ruby for sketchup 对于数据的传递非常有效