jquery 之serializeArray() 提交表单

serializeArray() 序列化表格元素 (类似 '.serialize()' 方法) 返回 JSON 数据结构数据。(摘自jquery文档)。

有以下一个表单窗口，代码：

<form action="" method="post" id="tf">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<th>姓名：</th>
<td>
<input type="text" id="txtUserName" name="UserName" />
</td>
<th>联系手机：</th>
<td>
<input type="text" name="Mobile" id="txtMobile" maxlength="11"/>
</td>
</tr>
<tr>
<td style=" text-align:center;" colspan="2">
<input type="button" value=" 提 交 " style="padding-top:3px;" name="butsubmit" id="butsubmit"/>
</td>
</tr>
</table>
</form>

JavaScript代码处理表单：

<script>
$(function () {
$("#butsubmit").click(function(){
var data = convertArray($("#tf").serializeArray());
$.post(url, data, function (d) {},"json");
});
})
function convertArray(o) { //主要是推荐这个函数。它将jquery系列化后的值转为name:value的形式。
var v = {};
for (var i in o) {
if (typeof (v[o[i].name]) == 'undefined') v[o[i].name] = o[i].value;
else v[o[i].name] += "," + o[i].value;
}
return v;
}

</script>

 

 

 

 

 

 

 

这几天做一个Ajax像服务器动态提交的表单然后给出即时反馈.这些表单内容都是一系列的.内容大同小异.所以代码和页面结构也是大同小异.但是其中有一个页面使用AJAX始终无法提取到服务器值.反而将此页的整个render出来的页面显示出来.关键代码如下:

 

    $(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();
        }
       
    }

 

 

 

 

nixil's blog

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表单：

 

< 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字符串，就可以使用我下面的这个扩展

 

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

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

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);
}

 

 

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

 

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