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 相关文章推荐
JavaScript进阶教程(第四课第一部分)
Apr 05 Javascript
JS的递增/递减运算符和带操作的赋值运算符的等价式
Dec 08 Javascript
js停止输出代码
Jul 20 Javascript
jQuery.get、jQuery.getJSON、jQuery.post无法返回JSON问题的解决方法
Jul 28 Javascript
js中的setInterval和setTimeout使用实例
May 09 Javascript
javascript根据时间生成m位随机数最大13位
Oct 30 Javascript
javascript获取select值的方法分析
Jul 02 Javascript
JavaScript和HTML DOM的区别与联系及Javascript和DOM的关系
Nov 15 Javascript
基于JS代码实现导航条弹出式悬浮菜单
Jun 17 Javascript
浅谈ajax在jquery中的请求和servlet中的响应
Jan 22 jQuery
浅谈layui分页控件field参数接收对象的问题
Sep 20 Javascript
jQuery中getJSON跨域原理的深入讲解
Sep 02 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
jQuery结合PHP+MySQL实现二级联动下拉列表[实例]
2011/11/15 Javascript
JavaScript中的字符串操作详解
2013/11/12 Javascript
JavaScript中的连字符详解
2013/11/28 Javascript
javascript中的事件代理初探
2014/03/08 Javascript
jQuery动态修改超链接地址的方法
2015/02/13 Javascript
JavaScript 事件对象介绍
2015/04/13 Javascript
jquery中的工具使用方法$.isFunction, $.isArray(), $.isWindow()
2015/08/09 Javascript
js HTML5 Ajax实现文件上传进度条功能
2016/02/13 Javascript
jqGrid 学习笔记整理——进阶篇(一 )
2016/04/17 Javascript
vue.js移动端app实战1:初始配置详解
2017/07/24 Javascript
vue-cli监听组件加载完成的方法
2018/09/07 Javascript
[02:11]2016国际邀请赛中国区预选赛全程回顾
2016/07/01 DOTA
python实现同时给多个变量赋值的方法
2015/04/30 Python
详解Python中的from..import绝对导入语句
2016/06/21 Python
Python创建对称矩阵的方法示例【基于numpy模块】
2017/10/12 Python
Django REST framework 分页的实现代码
2019/06/19 Python
Python PyCharm如何进行断点调试
2019/07/05 Python
使用django和vue进行数据交互的方法步骤
2019/11/11 Python
python3.8与pyinstaller冲突问题的快速解决方法
2020/01/16 Python
浅析Django 接收所有文件,前端展示文件(包括视频,文件,图片)ajax请求
2020/03/09 Python
python中wheel的用法整理
2020/06/15 Python
详解如何通过H5(浏览器/WebView/其他)唤起本地app
2017/12/11 HTML / CSS
HTML5+CSS设置浮动却没有动反而在中间且错行的问题
2020/05/26 HTML / CSS
中国制造网:Made-in-China.com
2019/10/25 全球购物
法学毕业生自我鉴定
2014/01/31 职场文书
军训 自我鉴定
2014/02/03 职场文书
反四风个人对照检查材料
2014/09/26 职场文书
滞留工资返还协议书
2014/10/19 职场文书
优秀高中学生评语
2014/12/30 职场文书
房地产销售主管岗位职责
2015/02/13 职场文书
2015年政协委员工作总结
2015/05/20 职场文书
订货会主持词
2015/07/01 职场文书
八年级数学教学反思
2016/02/17 职场文书
go xorm框架的使用
2021/05/22 Golang
我收到了德劲DE1107
2022/04/05 无线电
Elasticsearch 聚合查询和排序
2022/04/19 Python