Simple implementation of jQuery serializing forms into objects-JS Tutorial-php.cn

Simple implementation of jQuery serializing forms into objects

高洛峰

Release： 2016-12-03 15:47:16

Original

1272 people have browsed it

When using easyui's datagrid component, the query parameters passed during the query are object types. For convenience, the serialization method in jquery has been extended. By calling this method, all data in the form can be serialized

$.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;
};

Copy after login

Specific use:

<%@ 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=$(&#39;#queryForm&#39;).serializeObject();
    //{username:$(&#39;#username&#39;).val()}
    $(&#39;#dg&#39;).datagrid({
        url : &#39;${ctx}/user/loadData.action&#39;,
        pagination : true,
        idField : &#39;id&#39;,
        rownumbers : true,
        singleSelect : true,
        queryParams : params,
        pageSize : 10,
        pageNumber:1,
        pageList : [ 10, 20, 30, 40 ],
        sortName : &#39;age&#39;,
        sortOrder : &#39;asc&#39;,
        fitColumns : true,
        columns : [ [
             {field : &#39;phone&#39;,title : &#39;电话&#39;,width : 150,align : &#39;center&#39;,sortable : &#39;true&#39;},
                 {field : &#39;age&#39;,title : &#39;年龄&#39;,width : 100,align : &#39;center&#39;,sortable : &#39;true&#39;},
                 {field : &#39;email&#39;,title : &#39;邮箱&#39;,width : 100,align : &#39;left&#39;,sortable : &#39;true&#39;},
                 {field : &#39;username&#39;,title : &#39;用户名&#39;,width : 150,align : &#39;center&#39;,sortable : &#39;true&#39;},
                 {field : &#39;password&#39;,title : &#39;密码&#39;,width : 200,align : &#39;left&#39;},
                 {field : &#39;_opt&#39;,title : &#39;操作&#39;,width : 200,align : &#39;center&#39;,formatter : fmtOperate}
                 ] ]
    });
}
 
function fmtOperate(value, row, index) {
    var e=&#39;&#39;;
    e += &#39;<a href="${ctx}/user/initForm.action?id=&#39; + row.id + &#39;">编辑</a> &#39;;
    e += &#39;<a href="javascript:void(0)" onclick="del(&#39; + row.id + &#39;);">删除</a>&#39;;
    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 : &#39;show&#39;
                    });
                }
            }, "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>

Copy after login