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

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 对于数据的传递非常有效