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>