博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jQuery序列化表单数据 serialize()、serializeArray()及使用
阅读量:6883 次
发布时间:2019-06-27

本文共 6973 字,大约阅读时间需要 23 分钟。

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、高级搜索实例:
  结构:

  高级搜索执行:

/****高级搜索执行***/$("#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
page = null; List
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
> mgrOrgMap = (Map
>) getSession().getAttribute(OrganizationUtil.ORG_MGR); if(OrganizationUtil.isNullMgrOrg(mgrOrgMap)){ dataList = new ArrayList
(); }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
organizationIds = new ArrayList
(); //组织机构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
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
getOrganizationIds() { return organizationIds; } public void setOrganizationIds(List
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; }}

 

转载地址:http://zdnbl.baihongyu.com/

你可能感兴趣的文章
Webkit statistics of Android
查看>>
哥德巴赫猜想
查看>>
动态规划3--Help Jimmy
查看>>
Java常用英语汇总(面试必备)
查看>>
负载均衡的认识
查看>>
Swing-选项卡面板JTabbedPane-入门
查看>>
(21/24) webpack实战技巧:webpack对三方类库的优化操作
查看>>
复利完结观看评价
查看>>
service 需要注意的地方
查看>>
【并查集】Gym - 101128B - Black Vienna
查看>>
【模拟】洛谷 P1328 NOIP2014提高组 day1 T1 生活大爆炸版石头剪刀布
查看>>
JavaScript中的forEach
查看>>
【BZOJ】3039: 玉蟾宫 悬线法
查看>>
Clash Detection
查看>>
从CAP理论中分析Eureka与zookeeper的区别
查看>>
20172318 2018-2019-1 《程序设计与数据结构》第2周学习总结
查看>>
文件操作
查看>>
ubuntu忘记root密码解决
查看>>
windows 80端口被占用的解决方法
查看>>
Qt学习五 - 对话框
查看>>