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

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