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="">
                    <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="">
                    <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="">
                    <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="">
                    <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="">
                    <input id="Category" type="hidden" value="" />
                    <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="">
                    <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="">
                     <input type="radio" id="queryBean_isOpened" name="queryBean.isOpened" checked="checked" value="" ></input>&nbsp;<s:text name="sys.column.name.unRegDevice.noStart"/>
                    <input type="radio" id="queryBean_isOpened1" name="queryBean.isOpened" value="" ></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="">
                    <input type="radio" id="queryBean_protectState" checked="checked" name="queryBean.protectState" value="" ></input>&nbsp;<s:text name="sys.column.name.unRegDevice.noProtect"/>
                    <input type="radio" id="queryBean_protectState1" name="queryBean.protectState" value="" ></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="">
                    <input type="radio" name="queryBean.isFireWall" checked="checked" value=""></input>&nbsp;<s:text name="sys.column.name.unRegDevice.noOpen"/>
                    <input type="radio" name="queryBean.isFireWall" value=""></input>&nbsp;<s:text name="sys.column.name.unRegDevice.open"/>
                    <input type="radio" name="queryBean.isFireWall" value=""></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=;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 = ;
        if (page != null) {
             String  ob = getSession().getAttribute("selectStyle").toString();
                if("".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;
    }
}