Home > Article > Web Front-end > Simple implementation of jQuery serializing forms into objects

Simple implementation of jQuery serializing forms into objects

高洛峰Original: 2016-12-03 15:47:161241browse

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

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>

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：jQuery serializes the form into an instance of the Object objectNext article：jQuery serializes the form into an instance of the Object object

See more

Simple implementation of jQuery serializing forms into objects

Related articles