jquery 之serializeArray() 提交表单

    $(document).ready(function() {
        $("#Submit").click(function() {
            var a = $("#aspnetForm").serialize();
/*因为使用了masterpage,所以页面form的ID为aspnetForm*/
            $.ajax({
              url: "xxx.aspx",
              type: "get",
              data: a,
              success: function(data){
                $("#result").html(data);
              }
            });
        });
    });

    protected void Page_Load(object sender, EventArgs e)
    {
        if (Request.QueryString["length"] != null)
        {
            Response.Clear();
            Response.Write("这里是回传的数据");
            Response.End();
        }

    }

jQuery扩展 form序列化到json对象

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

$.fn.serializeObject = function() {
    var o = {};
    var a = 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 || '';
        }
    });
    return o;
}

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

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

1

2

3

4

5

<form id="testform">
    <input type="text" name="name" value="dummyName" id="name">
    <input type="text" name="category.id" value="categoryId" id="name">
    <input type="text" name="category.name" value="categoryName" id="name">
</form>

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

public class DummyProduct {
     
    private DummyCategory category;
    private String name;
     
    public DummyCategory getCategory() {
        return category;
    }
 
    public void setCategory(DummyCategory category) {
        this.category = category;
    }
 
    public String getName() {
        return name;
    }
 
    public void setName(String name) {
        this.name = name;
    }
     
}
 
 
public class DummyCategory {
    private String id;
    private String name;
 
    public String getId() {
        return id;
    }
 
    public void setId(String id) {
        this.id = id;
    }
 
    public String getName() {
        return name;
    }
 
    public void 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	`function` `paramString2obj (serializedParams) {`

     
    var obj={};
    function evalThem (str) {
        var attributeName = str.split("=")[0];
        var attributeValue = str.split("=")[1];
        if(!attributeValue){
            return ;
        }
         
        var array = attributeName.split(".");
        for (var i = 1; i < array.length; i++) {
            var tmpArray = Array();
            tmpArray.push("obj");
            for (var j = 0; j < i; j++) {
                tmpArray.push(array[j]);
            };
            var evalString = tmpArray.join(".");
            // alert(evalString);
            if(!eval(evalString)){
                eval(evalString+"={};");                
            }
        };
     
        eval("obj."+attributeName+"='"+attributeValue+"';");
         
    };
 
    var properties = serializedParams.split("&");
    for (var i = 0; i < properties.length; i++) {
        evalThem(properties[i]);
    };
 
    return obj;
}
 
 
$.fn.form2json = function(){
    var serializedParams = this.serialize();
    var obj = paramString2obj(serializedParams);
    return JSON.stringify(obj);
}

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

1 2	`var` `json = $("#testform").form2json();` `alert(json);`

jquery 之serializeArray() 提交表单

nixil's blog

jQuery扩展 form序列化到json对象