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 相关文章推荐
JS文本框不能输入空格验证方法
Mar 19 Javascript
基于jQuery实现的文字按钮表单特效整理
Dec 07 Javascript
用JavaScript实现页面重定向功能的教程
Jun 04 Javascript
Javascript实现的简单右键菜单类
Sep 23 Javascript
Bootstrap学习笔记之css组件(3)
Jun 07 Javascript
jquery实现拖动效果
Aug 10 Javascript
微信小程序 Template详解及简单实例
Jan 05 Javascript
jquery validation验证表单插件
Jan 07 Javascript
vue模板语法-插值详解
Mar 06 Javascript
详解Angular-cli生成组件修改css成less或sass的实例
Jul 27 Javascript
vue数字类型过滤器的示例代码
Sep 07 Javascript
微信小程序button组件使用详解
Jan 31 Javascript
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 第三节 变量介绍
2012/04/28 PHP
删除html标签得到纯文本可处理嵌套的标签
2014/04/28 PHP
PHP实现的超长文本分页显示功能示例
2018/06/04 PHP
阿里云的WindowsServer2016上部署php+apache
2018/07/17 PHP
JavaScript 中的replace方法说明
2007/04/13 Javascript
Jquery提交表单 Form.js官方插件介绍
2012/03/01 Javascript
JS+DIV+CSS实现的经典标签切换效果代码
2015/09/14 Javascript
jquery mobile 移动web(5)
2015/12/20 Javascript
详解网站中图片日常使用以及优化手法
2017/01/09 Javascript
微信小程序 Buffer缓冲区的详解
2017/07/06 Javascript
Angular整合zTree的示例代码
2018/01/24 Javascript
微信小程序实现获取准确的腾讯定位地址功能示例
2019/03/27 Javascript
jQuery鼠标滑过横向时间轴样式(代码详解)
2019/11/01 jQuery
JavaScript复制变量三种方法实例详解
2020/01/09 Javascript
JS实现简易图片自动轮播
2020/10/16 Javascript
Python写的服务监控程序实例
2015/01/31 Python
使用Python对IP进行转换的一些操作技巧小结
2015/11/09 Python
python实现多线程的两种方式
2016/05/22 Python
好用的Python编辑器WingIDE的使用经验总结
2016/08/31 Python
Python实现视频下载功能
2017/03/14 Python
python 利用turtle模块画出没有角的方格
2019/11/23 Python
keras在构建LSTM模型时对变长序列的处理操作
2020/06/29 Python
Python unittest如何生成HTMLTestRunner模块
2020/09/08 Python
python使用smtplib模块发送邮件
2020/12/17 Python
Roxy俄罗斯官方网站:冲浪和滑雪板的一切
2020/06/20 全球购物
贝佳斯官方网站:Borghese
2020/05/08 全球购物
营业员演讲稿
2013/12/30 职场文书
求职信范文英文版
2014/01/05 职场文书
毕业设计计划书
2014/01/09 职场文书
大学校园活动策划书
2014/02/04 职场文书
餐饮企业总经理岗位职责范文
2014/02/18 职场文书
文秘大学生求职信
2014/02/25 职场文书
农村葬礼主持词
2014/03/31 职场文书
三年级班级文化建设方案
2014/05/04 职场文书
go设置多个GOPATH的方式
2021/05/05 Golang
CSS实现九宫格布局(自适应)的示例代码
2022/02/12 HTML / CSS