当前位置: 首页 > 编程笔记 >

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

宦砚
2023-03-14
本文向大家介绍jQuery序列化表单成对象的简单实现,包括了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序列化表单成对象的简单实现就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持小牛知识库。

 类似资料:
  • 本文向大家介绍jQuery将表单序列化成一个Object对象的实例,包括了jQuery将表单序列化成一个Object对象的实例的使用技巧和注意事项,需要的朋友参考一下 验证表单的时候经常需要获取表单中name='***'的元素的值,然后加以判断。jQuery中提供了jQuery.serizlizeArray来将表单序列化成一个数组。尽管如此,数组还是不方便我们操作,我需要讲表单序列化成一个对象。这

  • 问题内容: 我正在尝试使用JSON(使用simplejson)序列化python对象列表,并收到以下错误:对象“不可JSON序列化”。 该类是一个简单的类,其字段只有整数,字符串和浮点数,并且从一个父超类继承相似的字段,例如: foo,bar是我上面提到的简单类型。唯一棘手的事情是,ChildClass有时具有一个字段,该字段引用另一个对象(类型不是ParentClass或ChildClass)。

  • 本文向大家介绍jQuery实现form表单元素序列化为json对象的方法,包括了jQuery实现form表单元素序列化为json对象的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jQuery实现form表单元素序列化为json对象的方法。分享给大家供大家参考,具体如下: 这段代码序列化form表单元素为json对象: 结果如下图所示: 希望本文所述对大家jQuery程序设计有所帮助

  • 但它返回一个id为空且产品为空的对象。当然,我不需要为这个简单的操作编写自定义的吗?

  • 本文向大家介绍简单了解Ajax表单序列化的实现方法,包括了简单了解Ajax表单序列化的实现方法的使用技巧和注意事项,需要的朋友参考一下 原生表单序列化 随着Ajax的出现,表单序列化已经成为一种需求,在学习原生Ajax时,若用POST方法向后台提交数据时,就需要将表单序列化 在JavaScript中可以利用表单字段的type属性,连同name和value属性,一起实现表单的序列化。 在进行表单序列

  • 本文向大家介绍jquery实现简单的表单验证,包括了jquery实现简单的表单验证的使用技巧和注意事项,需要的朋友参考一下  jquery如何实现简单的表单验证,我们先跟大家分享一下实现思路。 大概思路: 先为每一个required添加必填的标记,用each()方法来实现。 在each()方法中先是创建一个元素,然后通过append()方法将创建的元素加入到父元素后面。 这里面的this用的很精髓