在使用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用的很精髓