jQuery序列化表单成对象的简单实现


Posted in Javascript onNovember 29, 2016

在使用easyui的datagrid组件时,在查询时传递的查询参数是对象类型,为了方便,扩展了jquery中的序列化方法,调用该方法,可以将表单的所有数据序列化

$.fn.serializeObject=function(){ 
  var obj=new Object(); 
  $.each(this.serializeArray(),function(index,param){ 
    if(!(param.name in obj)){ 
      obj[param.name]=param.value; 
    } 
  }); 
  return obj; 
};

具体使用:

<%@ page language="java" contentType="text/html; charset=UTF-8"
  pageEncoding="UTF-8"%>
<%@include file="/WEB-INF/views/inc/taglibs.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<jsp:include page="/WEB-INF/views/inc/meta.jsp"></jsp:include>

<title>Insert title here</title>
<script type="text/javascript">
/* 将form表单序列化成对象object*/
$.fn.serializeObject=function(){ 
  var obj=new Object(); 
  $.each(this.serializeArray(),function(index,param){ 
    if(!(param.name in obj)){ 
      obj[param.name]=param.value; 
    } 
  }); 
  return obj; 
}; 

$(function() {
	query();
});

function query() {
	var params=$('#queryForm').serializeObject();
	//{username:$('#username').val()}
	$('#dg').datagrid({
		url : '${ctx}/user/loadData.action',
		pagination : true,
		idField : 'id',
		rownumbers : true,
		singleSelect : true,
		queryParams : params,
		pageSize : 10,
		pageNumber:1,
		pageList : [ 10, 20, 30, 40 ],
		sortName : 'age',
		sortOrder : 'asc',
		fitColumns : true,
		columns : [ [ 
		     {field : 'phone',title : '电话',width : 150,align : 'center',sortable : 'true'}, 
				 {field : 'age',title : '年龄',width : 100,align : 'center',sortable : 'true'}, 
				 {field : 'email',title : '邮箱',width : 100,align : 'left',sortable : 'true'}, 
				 {field : 'username',title : '用户名',width : 150,align : 'center',sortable : 'true'}, 
				 {field : 'password',title : '密码',width : 200,align : 'left'}, 
				 {field : '_opt',title : '操作',width : 200,align : 'center',formatter : fmtOperate} 
				 ] ]
	});
}

function fmtOperate(value, row, index) {
	var e='';
	e += '<a href="${ctx}/user/initForm.action?id=' + row.id + '">编辑</a> ';
	e += '<a href="javascript:void(0)" onclick="del(' + row.id + ');">删除</a>';
	return e;
}

/* 删除 */
function del(id) {
	$.messager.confirm("系统提示", "您确定要删除这条记录吗?", function(r) {
		if (r) {
			$.post("${ctx }/user/delete.action", {id : id}, function(result) {
				if (result.isSuccess) {
					$.messager.show({
						title : "系统提示",
						msg : result.msg,
						showType : "show"
					});
					$("#dg").datagrid("reload");
				} else {
					$.messager.show({
						title : "系统提示",
						msg : result.msg,
						showType : 'show'
					});
				}
			}, "json");
		}
	});
}

/*添加*/
function add(){
	window.location.href="${ctx}/user/initForm.action?id=0";
}
</script>
</head>
<body>
<form id="queryForm">
	<label>用户名:</label><input type="text" name="username" id="username"/>
	<input type="button" onclick="query();" value="查询"/>
	<input type="button" onclick="add();" value="添加"/>
</form>
<!-- 表格显示数据 -->
<table id="dg"></table>
</body>
</html>

以上这篇jQuery序列化表单成对象的简单实现就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于mootools插件实现遮罩层新手引导
May 24 Javascript
使用微信内置浏览器点击下拉框出现页面乱跳转现象(iphone),该怎么办
Jan 04 Javascript
jQuery中的Deferred和promise 的区别
Apr 03 Javascript
Js 获取当前函数参数对象的实现代码
Jun 20 Javascript
JS区分Object与Aarry的六种方法总结
Feb 27 Javascript
详解angularjs利用ui-route异步加载组件
May 21 Javascript
Vue实现数字输入框中分割手机号码的示例
Oct 10 Javascript
详解组件库的webpack构建速度优化
Jun 18 Javascript
layui的表单提交以及验证和修改弹框的实例
Sep 09 Javascript
layui点击按钮页面会自动刷新的解决方案
Oct 25 Javascript
javascript操作元素的常见方法小结
Nov 13 Javascript
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
May 29 jQuery
JS判断输入的字符串是否是数字的方法(正则表达式)
Nov 29 #Javascript
JS访问DOM节点方法详解
Nov 29 #Javascript
基于Node.js + WebSocket打造即时聊天程序嗨聊
Nov 29 #Javascript
浅谈js函数的多种定义方法与区别
Nov 29 #Javascript
原生JS简单实现ajax的方法示例
Nov 29 #Javascript
jQuery Checkbox 全选 反选的简单实例
Nov 29 #Javascript
使用Vue.js创建一个时间跟踪的单页应用
Nov 28 #Javascript
You might like
php去除数组中重复数据
2014/11/18 PHP
php版微信公众平台实现预约提交后发送email的方法
2016/09/26 PHP
PHP未登录自动跳转到登录页面
2016/12/21 PHP
PHP基于ICU扩展intl快速实现汉字转拼音及按拼音首字母分组排序的方法
2017/05/03 PHP
swoole和websocket简单聊天室开发
2017/11/18 PHP
php微信扫码支付 php公众号支付
2019/03/24 PHP
关于删除时的提示处理(确定删除吗)
2013/11/03 Javascript
jQuery中阻止冒泡事件的方法介绍
2014/04/12 Javascript
JQuery boxy插件在IE中边角图片不显示问题的解决
2015/05/20 Javascript
为何JS操作的href都是javascript:void(0);呢
2015/11/12 Javascript
实例讲解JS中setTimeout()的用法
2016/01/28 Javascript
ES2015 Symbol 一种绝不重复的值
2016/12/25 Javascript
nodejs6下使用koa2框架实例
2017/05/18 NodeJs
js实现1,2,3,5数字按照概率生成
2017/09/12 Javascript
微信小程序实现人脸检测功能
2018/05/25 Javascript
node.js 基于cheerio的爬虫工具的实现(需要登录权限的爬虫工具)
2019/04/10 Javascript
[49:35]2018DOTA2亚洲邀请赛3月30日 小组赛A组 KG VS TNC
2018/03/31 DOTA
[58:11]守擂赛第二周擂主赛 DeMonsTer vs Leopard
2020/04/28 DOTA
解决python大批量读写.doc文件的问题
2018/05/08 Python
PyTorch学习笔记之回归实战
2018/05/28 Python
python使用PIL模块获取图片像素点的方法
2019/01/08 Python
python 获取毫秒数,计算调用时长的方法
2019/02/20 Python
python 动态迁移solr数据过程解析
2019/09/04 Python
PYTHON发送邮件YAGMAIL的简单实现解析
2019/10/28 Python
分布式全文检索引擎ElasticSearch原理及使用实例
2020/11/14 Python
彻底解决pip下载pytorch慢的问题方法
2021/03/01 Python
美国著名手表网站:Timepiece
2017/11/15 全球购物
Notino意大利:购买香水和化妆品
2018/11/14 全球购物
内容编辑个人求职信
2013/12/10 职场文书
公司门卫的岗位职责
2014/02/19 职场文书
导师工作推荐信
2015/03/27 职场文书
爱的教育观后感
2015/06/17 职场文书
校运会班级霸气口号
2015/12/24 职场文书
《日月潭》教学反思
2016/02/20 职场文书
Python基础之赋值,浅拷贝,深拷贝的区别
2021/04/30 Python
多台电脑共享文件怎么设置?多台电脑共享文件操作教程
2022/04/08 数码科技