jQuery扩展 form序列化到json对象

来源：互联网发布：rfcn网络编辑：程序博客网时间：2024/05/09 04:15

jQuery没有直接支持form到json的序列化方法，目前网上有一个实现是这样的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$.fn.serializeObject =function() {
    varo = {};
    vara = this.serializeArray();
    $.each(a,function() {
        if(o[this.name]) {
            if(!o[this.name].push) {
                o[this.name] = [ o[this.name] ];
            }
            o[this.name].push(this.value || '');
        }else {
            o[this.name] =this.value ||'';
        }
    });
    returno;
}

这个function对于普通的对象转换是足够的，但是如果出现对象内部又包含子对象的情形就不能支持了。

例如我有这样的一个form表单：

1
2
3
4
5
<formid="testform">
    <inputtype="text" name="name" value="dummyName" id="name">
    <inputtype="text" name="category.id" value="categoryId" id="name">
    <inputtype="text" name="category.name" value="categoryName" id="name">
</form>

对应到server端上的domain class是这样的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
public class DummyProduct {
     
    privateDummyCategory category;
    privateString name;
     
    publicDummyCategory getCategory() {
        returncategory;
    }
 
    publicvoid setCategory(DummyCategory category) {
        this.category = category;
    }
 
    publicString getName() {
        returnname;
    }
 
    publicvoid setName(String name) {
        this.name = name;
    }
     
}
 
 
public class DummyCategory {
    privateString id;
    privateString name;
 
    publicString getId() {
        returnid;
    }
 
    publicvoid setId(String id) {
        this.id = id;
    }
 
    publicString getName() {
        returnname;
    }
 
    publicvoid setName(String name) {
        this.name = name;
    }
}

如果想把表单数据序列化成跟server端domain class匹配的json字符串，就可以使用我下面的这个扩展

1
/** @serializedParams looks like"prop1=value1&prop2=value2".  

1
Nested property like'prop.subprop=value' is also supported **/

1
functionparamString2obj (serializedParams) {

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
     
    varobj={};
    functionevalThem (str) {
        varattributeName = str.split("=")[0];
        varattributeValue = str.split("=")[1];
        if(!attributeValue){
            return;
        }
         
        vararray = attributeName.split(".");
        for(vari = 1; i < array.length; i++) {
            vartmpArray = Array();
            tmpArray.push("obj");
            for(varj = 0; j < i; j++) {
                tmpArray.push(array[j]);
            };
            varevalString = tmpArray.join(".");
            // alert(evalString);
            if(!eval(evalString)){
                eval(evalString+"={};");               
            }
        };
     
        eval("obj."+attributeName+"='"+attributeValue+"';");
         
    };
 
    varproperties = serializedParams.split("&");
    for(vari = 0; i < properties.length; i++) {
        evalThem(properties[i]);
    };
 
    returnobj;
}
 
 
$.fn.form2json =function(){
    varserializedParams = this.serialize();
    varobj = paramString2obj(serializedParams);
    returnJSON.stringify(obj);
}

使用起来大概像这个样子:

varjson = $("#testform").form2json();

alert(json);

0 0