023-将表单序列化为json对象

使用jQuery将表单序列化为json对象，其中serializeJson方法的名字任意，serializeArray()这个jQuery提供的方法。this指的就是谁调用了这个方法。

$.fn.serializeJson=function(){
     var serializeObj={};
     var array=this.serializeArray();
     $(array).each(function(){
         if(serializeObj[this.name]){
             if($.isArray(serializeObj[this.name])){
                 serializeObj[this.name].push(this.value);
             }else{
                 serializeObj[this.name]=[serializeObj[this.name],this.value];
             }
         }else{
             serializeObj[this.name]=this.value;
         }
     });
     return serializeObj;
}; 

使用演示：

this指的就是$("#searchForm")

<script type="text/javascript">
//指定一个工具方法，用于将指定的form表单中所有的输入项转为json数据{key:value,key:value,..}
    $.fn.serializeJson=function(){
        var serializeObj={};
        var array=this.serializeArray();
        $(array).each(function(){
            if(serializeObj[this.name]){
                if($.isArray(serializeObj[this.name])){
                    serializeObj[this.name].push(this.value);
                }else{
                    serializeObj[this.name]=[serializeObj[this.name],this.value];
                }
            }else{
                serializeObj[this.name]=this.value;
            }
        });
        return serializeObj;
    }; 

    $("#btn").click(function(){
        //将指定的form表单中所有的输入项转为json数据{key:value,key:value,..}
        var p = $("#searchForm").serializeJson();

        //调用数据表格的load方法，重新发送一次ajax请求，并且提交参数
        $("#grid").datagrid("load",p);

        //关闭查询窗口
        $("#searchWindow").window("close");
    });
</script>

页面提供form表单

　　　　　　　　<!-- 这个表单其实不是用来提交的，是用来转json用的 -->
            <form id="searchForm">
                <table class="table-edit" width="80%" align="center">
                    <tr class="title">
                        <td colspan="2">查询条件</td>
                    </tr>
                    <tr>
                        <td>省</td>
                        <td><input type="text" name="region.province"/></td>
                    </tr>
                    <tr>
                        <td>市</td>
                        <td><input type="text" name="region.city"/></td>
                    </tr>
                    <tr>
                        <td>区（县）</td>
                        <td><input type="text" name="region.district"/></td>
                    </tr>
                    <tr>
                        <td>关键字</td>
                        <td><input type="text" name="addresskey"/></td>
                    </tr>
                    <tr>
                        <td colspan="2"><a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">查询</a> </td>
                    </tr>
                </table>
            </form>