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

2019-11-19 18:47:02

字体：大中小

来源：转载

供稿：网友

在使用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序列化表单成对象的简单实现就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持武林网。

上一篇：利用CSS、JavaScript及Ajax实现图片预加载的方法

下一篇：JS判断输入的字符串是否是数字的方法(正则表达式)