jQuery序列化表單數據 serialize()、serializeArray()及使用

1、 serialize() 方法：

　　serialize() 方法通過序列化表單值，創建 URL 編碼文本字符串。

　　您可以選擇一個或多個表單元素（比如 input 及/或 文本框），或者 form 元素本身。

　　序列化的值可在生成 AJAX 請求時用於 URL 查詢字符串中，這樣在ajax提交表單數據時，就不用一一列舉每一個參數，只需將data參數設置為：$("form").serialize()即可。

//語法
$(selector).serialize()

　　輸出標准的查詢字符串：a=1&b=2&c=3&d=4&e=5

　　注釋：只會將“成功的控件”序列化為字符串。（即指沒被禁用的元素）如果不使用按鈕來提交表單，則不對提交按鈕的值序列化。如果要表單元素的值包含到序列字符串中，元素必須使用 name 屬性。

2、serializeArray() 方法：

　　serializeArray() 方法通過序列化表單值來創建對象數組（名稱和值）。

　　您可以選擇一個或多個表單元素（比如 input 及/或 textarea），或者 form 元素本身。

//格式：
var jsonData = $("form").serializeArray();

　　注意：此方法返回的是 JSON 對象而非 JSON 字符串。

　　返回的 JSON 對象是由一個對象數組組成的，其中每個對象包含一個或兩個名值對 —— name 參數和 value 參數（如果 value 不為空的話）。舉例來說：

[ 
  {name: 'firstname', value: 'Hello'}, 
  {name: 'lastname', value: 'World'},
  {name: 'alias'}, // 值為空
]

　　特別說明，元素不能被禁用（禁用的元素不會被包括在內），並且元素應當有含有 name 屬性。提交按鈕的值也不會被序列化。文件選擇元素的數據也不會被序列化。

　　注意：1、不被禁用；2、包含name屬性

3、高級搜索實例：

　　結構：

<div class="title-search advanced_search"><table><tr><td>
    <div class="ui-filter">
        <div class="ui-filter-text " >
            <span><s:text name="cems.advancedSearch"></s:text></span>
        </div>
        <div class="ui-filter-list">
            <form id="hForm"  class="form">
            <table class="form">
            <tr>
                <td class="formTitle"><s:text name="sys.column.name.unRegDevice.name"></s:text></td>
                <td class="formValue" colspan="2">
                    <input id="unRegDevice_hostName" name="queryBean.hostName"  type="text"  class="form-control" placeholder='<s:text name="sys.column.name.unRegDevice.name"/>'   />
                </td>            
                <td class="formTitle"><s:text name="sys.column.name.unRegDevice.ip"></s:text></td>
                <td class="formValue" colspan="2">
                    <input id="unRegDevice_ip" name="queryBean.ip"  type="text"  class="form-control" placeholder='<s:text name="sys.column.name.unRegDevice.ip"></s:text>'  data-mask=""  data-inputmask="'alias': 'ip'"   isvalid="yes" />
                </td>
            </tr>
            <tr>
                <td class="formTitle"><s:text name="sys.column.name.unRegDevice.groupName"></s:text></td>
                <td class="formValue" colspan="2">
                    <input id="unRegDevice_groupName" name="queryBean.groupName"  type="text"  class="form-control" placeholder='<s:text name="sys.column.name.unRegDevice.groupName"></s:text>'   />
                </td>             
                <td class="formTitle"><s:text name="sys.column.name.unRegDevice.mac"></s:text></td>
                <td class="formValue" colspan="2">
                    <input id="unRegDevice_mac" name="queryBean.mac"  type="text"  class="form-control" placeholder='<s:text name="sys.column.name.unRegDevice.mac"></s:text>'  isvalid="yes" />
                </td> 
            </tr>
            <tr>
                <td class="formTitle"><s:text name="sys.column.name.unRegDevice.updateTime"></s:text></td>
                <td class="formValue" colspan="2">
                    <input id="Category" type="hidden" value="1" />
                    <div style="float: left; width: 45%;">
                        <input id="StartTime"   name="queryBean.updateBeginTime" readonly type="text"  class="form-control input-wdatepicker"  onclick="WdatePicker()"  onfocus="WdatePicker()">
                    </div>
                </td>
                <td class="formTitle">至</td>
                <td class="formValue" colspan="2">
                    <div style="width:130px;">
                        <input id="EndTime"  name="queryBean.updateEndTime" readonly type="text"  class="form-control input-wdatepicker"   onclick="WdatePicker()"   onfocus="WdatePicker()">
                    </div>
               </td> 
            </tr>
            <tr>
                <td class="formTitle"><s:text name="sys.column.name.unRegDevice.isOpened"></s:text></td>
                <td class="formValue" colspan="2">
                     <input type="radio" id="queryBean_isOpened" name="queryBean.isOpened" checked="checked" value="0" ></input>&nbsp;<s:text name="sys.column.name.unRegDevice.noStart"/>
                    <input type="radio" id="queryBean_isOpened1" name="queryBean.isOpened" value="1" ></input>&nbsp;<s:text name="sys.column.name.unRegDevice.start"/>
                </td>              
                <td class="formTitle"><s:text name="sys.column.name.unRegDevice.protectState"></s:text></td>
                <td class="formValue" colspan="2">
                    <input type="radio" id="queryBean_protectState" checked="checked" name="queryBean.protectState" value="0" ></input>&nbsp;<s:text name="sys.column.name.unRegDevice.noProtect"/>
                    <input type="radio" id="queryBean_protectState1" name="queryBean.protectState" value="1" ></input>&nbsp;<s:text name="sys.column.name.unRegDevice.protect"/>
                </td>
            </tr>
            <tr>
                <td class="formTitle"><s:text name="sys.column.name.unRegDevice.isFireWall"></s:text></td>
                <td class="formValue" colspan="5">
                    <input type="radio" name="queryBean.isFireWall" checked="checked" value="0"></input>&nbsp;<s:text name="sys.column.name.unRegDevice.noOpen"/>
                    <input type="radio" name="queryBean.isFireWall" value="1"></input>&nbsp;<s:text name="sys.column.name.unRegDevice.open"/>
                    <input type="radio" name="queryBean.isFireWall" value="2"></input>&nbsp;<s:text name="sys.column.name.unRegDevice.unknown"/>
                </td>
            </tr>
            </table>
            </form>
            <div class="ui-filter-list-bottom">
                <a id="btn_Reset" class="btn btn-default"><s:text name="cems.clear"></s:text></a>
                <a id="highSearchButton" class="btn btn-primary"><s:text name="cems.ok"></s:text></a>
               </div>
           </div>
    </div>
</td></tr></table></div>

　　高級搜索執行：

/****高級搜索執行***/ $("#highSearchButton").bind("click",function(){ if($("#hForm").Validform()){ if (!$(".ui-filter-text").next('.ui-filter-list').is(":hidden")) { $(".ui-filter-text").trigger("click"); } $gridTable.jqGrid('setGridParam', { postData: serializeObject($("#hForm")), page: 1 }).trigger('reloadGrid'); } });

　　序列號表單數據：

/** *序列化form表單 *@param 要序列化的表單的名稱 *@return 返回對象 ***/ function serializeObject(form){ var o = {}; form.find(".ui-select").each(function(r){ var name=$(this).attr("name"); var value=$(this).attr("data-value"); o[name]= value; }) $.each(form.serializeArray(),function(index){ if(o[this['name']]){ o[this['name']] = o[this['name']] + ","+this['value']; }else{ o[this['name']] =  this['value']; } }); return o; }

 

　　form.serializeArray()：通過序列化表單值來創建對象數組（名稱和值）；

　　index：代表該對象數組的索引

 　　然后java action層：

public class UnRegDeviceAction extends BaseActionImpl { …… //頁面queryBean對象
private UnRegDeviceQueryBean queryBean; //get/set方法
public UnRegDeviceQueryBean getQueryBean() { return queryBean; } public void setQueryBean(UnRegDeviceQueryBean queryBean) { this.queryBean = queryBean; } …… } 

　　數據列表查詢：

　　　/** * 數據列表查詢 */
    public void getDeviceJson(){ log.info("未注冊設備數據列表查詢-ST"); Page<UnRegDevice> page = null; List<UnRegDevice> dataList = null; //拼排序條件。
        log.info("拼排序條件-ST"); String orderStr = getRequest().getParameter("order"); String sortStr=  getRequest().getParameter("sort"); if(queryBean == null){ queryBean = new UnRegDeviceQueryBean(); } if(sortStr != null && orderStr != null){ String[] orderArr = orderStr.split(","); String[] sortArr = sortStr.split(","); for(int i=0;i<sortArr.length;i++){ queryBean.addOrderProperty("this."+sortArr[i], "asc".equals(orderArr[i]) ? Order.ASC : Order.DESC); } }log.info("拼排序條件-END"); //---------------------------------數據過濾ST
         log.info("數據過濾-ST"); @SuppressWarnings("unchecked") Map<String, List<String>>  mgrOrgMap =  (Map<String, List<String>>) getSession().getAttribute(OrganizationUtil.ORG_MGR); if(OrganizationUtil.isNullMgrOrg(mgrOrgMap)){ dataList = new ArrayList<UnRegDevice>(); }else{ Organization mgrOrg = new Organization(); mgrOrg.setMgrOrg(mgrOrgMap); queryBean.setOrganization(mgrOrg); page = unRegDeviceService.query(queryBean, getCurrentPageNo(), getPageSize()); dataList = page.getDataList(); } log.info("數據過濾-END"); //---------------------------------數據過濾END
 JsonConfigEx jsonConfigEx = new JsonConfigEx(); jsonConfigEx.addPropertyIncludes("organization","name"); jsonConfigEx.setIgoreHibernateLazyLoadProperty(false); String json = JsonUtils.collection2Json(dataList,jsonConfigEx); /*** 組裝成grirdJson格式 ***/
        int total = 0; if (page != null) { String ob = getSession().getAttribute("selectStyle").toString(); if("1".equals(ob)){ total = page.getTotalDataCount(); }else{ total = page.getTotalPageCount(); } } String girdJson = EasyUIGridUtils.toGridJson(total, json); print(girdJson); log.info("未注冊設備數據列表查詢-END-數據格式："+girdJson ); }

　　可以看到上面的queryBean查詢條件：

　　（1）當未高級搜索時，queryBean 為 null。

　　（2）高級搜索時，queryBean 為傳過來的值。

　　bean內容

package com.vrv.cems.assets.bean; import java.sql.Timestamp; import java.util.ArrayList; import java.util.List; import com.sys.common.base.support.QueryObject; import com.sys.common.base.support.Orderable.Order; import com.sys.common.base.support.Orderable.OrderedProperty; import com.vrv.cems.assets.domain.UnRegDevice; public class UnRegDeviceQueryBean extends UnRegDevice { private static final long serialVersionUID = -8893630319158639345L; private List<String> organizationIds = new ArrayList<String>(); //組織機構ID //掃描數據入庫開始時間
    private Timestamp updateBeginTime; private Timestamp updateEndTime; private boolean orgIdIsEmpty; public boolean isOrgIdIsEmpty() { return orgIdIsEmpty; } public void setOrgIdIsEmpty(boolean orgIdIsEmpty) { this.orgIdIsEmpty = orgIdIsEmpty; } private String organizationName;//組織名稱
    private String devType;//設備類型名稱
    public String getDevType() { return devType; } public void setDevType(String devType) { this.devType = devType; } private String conditions; //掃描數據入庫結束時間
    /** * 內部查詢代理對象。 */
    private QueryObject queryObject = new QueryObject(); /** * 獲取排序規則對象 */
    public List<OrderedProperty> getOrderedProperties() { return queryObject.getOrderedProperties(); } public void addOrderProperty(String propertyName, Order order) { queryObject.addOrderProperty(propertyName, order); } public void addOrderProperty(String propertyName) { queryObject.addOrderProperty(propertyName); } public Timestamp getUpdateBeginTime() { return updateBeginTime; } public void setUpdateBeginTime(Timestamp updateBeginTime) { this.updateBeginTime = updateBeginTime; } public Timestamp getUpdateEndTime() { return updateEndTime; } public void setUpdateEndTime(Timestamp updateEndTime) { this.updateEndTime = updateEndTime; } public List<String> getOrganizationIds() { return organizationIds; } public void setOrganizationIds(List<String> organizationIds) { this.organizationIds = organizationIds; } public String getConditions() { return conditions; } public void setConditions(String conditions) { this.conditions = conditions; } public String getOrganizationName() { return organizationName; } public void setOrganizationName(String organizationName) { this.organizationName = organizationName; } }