今天在用Ajax做一个添加模块的时候，所需参数太多，所以想到了serialize()方法。
serialize() 方法通过序列化表单值，创建 URL 编码文本字符串。
您可以选择一个或多个表单元素（比如 input 及/或 文本框），或者 Form 元素本身。
序列化的值可在生成 Ajax 请求时用于 URL 查询字符串中。
语法： $(selector).serialize()
Html
<!DOCTYPE html> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@taglib prefix="s" uri="/struts-tags"%> <style> /* layui 时间选择器 不要秒的选项 */ /* .layui-laydate-content>.layui-laydate-list { padding-bottom: 0px; overflow: hidden; } .layui-laydate-content>.layui-laydate-list>li{ width:50% } .merge-box .scrollbox .merge-list { padding-bottom: 5px; } */ </style> <s:form id="sjForm-add" action="" method="post"> <s:hidden id="operation" name="operation" value="add" /> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title">添加商家</h4> </div> <div class="modal-body"> <div class="container-fluid"> <div class="row"> <div class="form-horizontal col-md-5 form-horizontal-txt8"> <div class="form-group"> <label class="control-label"><em class="colred">*</em>商家名称</label> <div class="form-controlbox"> <s:textfield theme="simple" id="sjMc" name="sj.sj_mc" cssClass="validate[required,minSize[2],maxSize[50]] form-control" placeholder="请输入商家名称"/> </div> </div> </div> <div class="form-horizontal col-md-5 form-horizontal-txt8"> <div class="form-group"> <label class="control-label"><em class="colred">*</em>商家简称</label> <div class="form-controlbox"> <s:textfield theme="simple" id="sjqc" name="sj.sjjc" cssClass="validate[required,maxSize[50]] form-control" placeholder="请输入商家简称"/> </div> </div> </div> <div class="form-horizontal col-md-5 form-horizontal-txt8"> <div class="form-group"> <label class="control-label"><em class="colred">*</em>行业</label> <div class="form-controlbox"> <input type="hidden" id="hySelId2" name="sj.hy_dm" value="5264"/> <input type="text" readonly="readonly" id="hySel2" value="机动车燃料零售" class="validate[required] form-control hySel" onclick="showHyMenu2()" placeholder="请选择所属行业" autocomplete="off"/> <div id="hyMenuContent2" class="ztreebox ztreebox2 hyMenuContent"> <ul id="hyTree2" class="ztree"></ul> </div> </div> </div> </div> <div class="form-horizontal col-md-5 form-horizontal-txt8"> <div class="form-group"> <label class="control-label"><em class="colred">*</em>地区</label> <div class="form-controlbox"> <input type="hidden" id="citySelId2" name="sj.dq_dm" value=""/> <input type="text" readonly="readonly" id="citySel2" value="" class="validate[required] form-control" onclick="showCityMenu2()" onblur="newSjbm()" placeholder="请选择地区" autocomplete="off"/> <div id="cityMenuContent2" class="ztreebox ztreebox2"> <ul id="cityTree2" class="ztree"></ul> </div> </div> </div> </div> <div class="form-horizontal col-md-5 form-horizontal-txt8"> <div class="form-group"> <label class="control-label"><em class="colred">*</em>社会统一信用代码</label> <div class="form-controlbox"> <s:textfield theme="simple" id="sh" name="sj.sh" cssClass="validate[required,maxSize[20],ajax[checkArgumentExist,tms_sj,sh]] form-control" placeholder="请输入社会统一信用代码"/> </div> </div> </div> <div class="form-horizontal col-md-5 form-horizontal-txt8"> <div class="form-group"> <label class="control-label"><em class="colred">*</em>商家编码</label> <div class="form-controlbox"> <s:textfield theme="simple" id="sjBm" name="sj.sj_bm" cssClass="form-control" readonly="true" onfocus="validateSjbm()" placeholder="请输入商家编码"/> </div> </div> </div> <div class="form-horizontal col-md-5 form-horizontal-txt8"> <div class="form-group"> <label class="control-label"><em class="colred">*</em>商家类型</label> <div class="form-controlbox"> <s:select list="sjlxList" theme="simple" listKey="sjlx_dm" listValue="sjlx_mc" name="sj.sjlx_dm" cssClass="form-control jsgetVal" /> </div> </div> </div> <div class="form-horizontal col-md-5 form-horizontal-txt8"> <div class="form-group"> <label class="control-label"><em class="colred">*</em>商家性质</label> <div class="form-controlbox"> <s:select list="sjxzList" theme="simple" listKey="dm" listValue="mc" name="sj.sjxz_dm" cssClass="form-control jsgetVal" /> </div> </div> </div> <div class="form-horizontal col-md-5 form-horizontal-txt8"> <div class="form-group"> <label class="control-label">纳税人识别号</label> <div class="form-controlbox"> <s:textfield theme="simple" name="sj.nsrsbh" cssClass="validate[maxSize[20] form-control" placeholder="请输入纳税人识别号"/> </div> </div> </div> <div class="form-horizontal col-md-5 form-horizontal-txt8"> <div class="form-group"> <label class="control-label">工商注册号</label> <div class="form-controlbox"> <s:textfield theme="simple" name="sj.gszch" cssClass="validate[maxSize[20],ajax[checkArgumentExist,tms_sj,gszch]] form-control" placeholder="请输入工商注册号"/> </div> </div> </div> <div class="form-horizontal col-md-5 form-horizontal-txt8"> <div class="form-group"> <label class="control-label">上级机构</label> <div class="form-controlbox"> <s:hidden theme="simple" name="sj.sj_sj_id" id="sjId1"/> <input name="sj.sj_sj_mc" id="sjMc1" onclick="selectSjInfo()" type="text" class="form-control" placeholder="请选择上级机构" autocomplete="off" readonly=""> </div> </div> </div> <div class="form-horizontal col-md-5 form-horizontal-txt8"> <div class="form-group"> <label class="control-label">特许经营证号</label> <div class="form-controlbox"> <s:textfield theme="simple" name="sj.txjyzh" cssClass="validate[maxSize[40],ajax[checkArgumentExist,tms_sj,txjyzh]] form-control" placeholder="请输入特许经营证号"/> </div> </div> </div> <div class="form-horizontal col-md-5 form-horizontal-txt8"> <div class="form-group"> <label class="control-label">营业范围</label> <div class="form-controlbox"> <s:textarea theme="simple" cssStyle="height: 50px" id="jyfw" name="sj.jyfw" cssClass="validate[maxSize[100]] form-control" placeholder="请输入营业范围"/> </div> </div> </div> <div class="form-horizontal col-md-5 form-horizontal-txt8"> <div class="form-group"> <label class="control-label">行业规模</label> <div class="form-controlbox"> <s:textarea theme="simple" cssStyle="height: 50px" id="hygm" name="sj.hygm" cssClass="validate[maxSize[30]] form-control" placeholder="请输入行业规模"/> </div> </div> </div> </div> <div class="row"> <div class="form-horizontal col-md-5 form-horizontal-txt8"> <div class="form-group"> <label class="control-label">组织机构代码</label> <div class="form-controlbox"> <s:textfield theme="simple" id="zzjgDm" name="sj.zzjg_dm" cssClass="validate[maxSize[20]] form-control" placeholder="请输入组织机构代码"/> </div> </div> </div> <div class="form-horizontal col-md-5 form-horizontal-txt8"> <div class="form-group"> <label class="control-label">企业网址</label> <div class="form-controlbox"> <s:textfield theme="simple" id="qywz" name="sj.qywz" cssClass="validate[custom[url] maxSize[100]] form-control" placeholder="请输入企业网址"/> </div> </div> </div> <div class="form-horizontal col-md-5 form-horizontal-txt8"> <div class="form-group"> <label class="control-label">法人代表</label> <div class="form-controlbox"> <s:textfield theme="simple" id="frdb" name="sj.frdb" cssClass="validate[custom[chinese],minSize[2],maxSize[25]] form-control" placeholder="请输入法人代表"/> </div> </div> </div> <div class="form-horizontal col-md-5 form-horizontal-txt8"> <div class="form-group"> <label class="control-label">注册资本（万元）</label> <div class="form-controlbox"> <s:textfield theme="simple" id="zczb" name="sj.zczb" cssClass="validate[custom[number],maxSize[10]] form-control" placeholder="请输入注册资本（万元）"/> </div> </div> </div> <div class="form-horizontal col-md-5 form-horizontal-txt8"> <div class="form-group"> <label class="control-label"><em class="colred">*</em>注册地址</label> <div class="form-controlbox"> <s:textarea theme="simple" id="stddz" name="sj.zcdz" cssClass="validate[required,maxSize[250]] form-control" placeholder="请输入注册地址"/> </div> </div> </div> <div class="form-horizontal col-md-5 form-horizontal-txt8"> <div class="form-group"> <label class="control-label"><em class="colred">*</em>经营地址</label> <div class="form-controlbox"> <s:textarea theme="simple" id="stddz" name="sj.jydz" cssClass="validate[required,maxSize[250]] form-control" placeholder="请输入经营地址"/> </div> </div> </div> <div class="form-horizontal col-md-5 form-horizontal-txt8"> <div class="form-group"> <label class="control-label">营业期限开始</label> <div class="form-controlbox"> <input id="yyqxks" name="sj.yyqxks" type="text" readonly class="form-control icon-calendar laydateDay" placeholder="请选择日期" autocomplete="off" > </div> </div> </div> <div class="form-horizontal col-md-5 form-horizontal-txt8"> <div class="form-group"> <label class="control-label">营业期限结束</label> <div class="form-controlbox"> <input id="yyqxjs" name="sj.yyqxjs" type="text" readonly class="form-control icon-calendar laydateDay" placeholder="请选择日期" autocomplete="off" > </div> </div> </div> <div class="form-horizontal col-md-5 form-horizontal-txt8"> <div class="form-group"> <label class="control-label">开始营业时间</label> <div class="form-controlbox"> <input id="ksyysj" name="sj.ksyysj" type="text" readonly class="form-control icon-calendar laydateTime" placeholder="请选择时间" autocomplete="off" > </div> </div> </div> <div class="form-horizontal col-md-5 form-horizontal-txt8"> <div class="form-group"> <label class="control-label">结束营业时间</label> <div class="form-controlbox"> <input id="jsyysj" name="sj.jsyysj" type="text" readonly class="form-control icon-calendar laydateTime" placeholder="请选择时间" autocomplete="off" > </div> </div> </div> <div class="form-horizontal col-md-5 form-horizontal-txt8"> <div class="form-group"> <label class="control-label">GPS X坐标</label> <div class="form-controlbox"> <s:textfield theme="simple" id="gpsxzb" name="sj.gpsxzb" cssClass="validate[custom[number],maxSize[10]] form-control" placeholder="请输入GPS X坐标"/> </div> </div> </div> <div class="form-horizontal col-md-5 form-horizontal-txt8"> <div class="form-group"> <label class="control-label">GPS Y坐标</label> <div class="form-controlbox"> <s:textfield theme="simple" id="gpsyzb" name="sj.gpsyzb" cssClass="validate[custom[number],maxSize[10]] form-control" placeholder="请输入GPS Y坐标"/> </div> </div> </div> </div> <div class="row"> <div class="form-horizontal col-md-5 form-horizontal-txt8"> <div class="form-group"> <label class="control-label"><em class="colred">*</em>状态</label> <div class="form-controlbox"> <s:select list="pageConstantStatus" theme="simple" listKey="constantKey" listValue="constantName" name="sj.zt" cssClass="form-control jsgetVal" /> </div> </div> </div> </div> <div class="row"> <p class="modal-title-line">联系人信息</p> <div class="form-horizontal col-md-5 form-horizontal-txt8"> <div class="form-group"> <label class="control-label">站长姓名</label> <div class="form-controlbox"> <s:textfield theme="simple" name="sj.zzxm" cssClass="validate[custom[chinese],minSize[2],maxSize[25]] form-control" placeholder="请输入站长姓名"/> </div> </div> </div> <div class="form-horizontal col-md-5 form-horizontal-txt8"> <div class="form-group"> <label class="control-label">财务负责人姓名</label> <div class="form-controlbox"> <s:textfield theme="simple" name="sj.cwfzrxm" cssClass="validate[custom[chinese],minSize[2],maxSize[25]] form-control" placeholder="请输入财务负责人姓名"/> </div> </div> </div> <div class="form-horizontal col-md-5 form-horizontal-txt8"> <div class="form-group"> <label class="control-label">站长电话</label> <div class="form-controlbox"> <s:textfield theme="simple" name="sj.zzdh" cssClass="validate[custom[phone]] form-control" placeholder="请输入站长电话"/> </div> </div> </div> <div class="form-horizontal col-md-5 form-horizontal-txt8"> <div class="form-group"> <label class="control-label">财务负责人电话</label> <div class="form-controlbox"> <s:textfield theme="simple" name="sj.cwfzrdh" cssClass="validate[custom[phone]] form-control" placeholder="请输入财务负责人电话"/> </div> </div> </div> <div class="form-horizontal col-md-5 form-horizontal-txt8"> <div class="form-group"> <label class="control-label">站长邮箱</label> <div class="form-controlbox"> <s:textfield theme="simple" name="sj.zzyx" cssClass="validate[custom[email],maxSize[55]] form-control" placeholder="请输入站长邮箱"/> </div> </div> </div> <div class="form-horizontal col-md-5 form-horizontal-txt8"> <div class="form-group"> <label class="control-label">财务负责人邮箱</label> <div class="form-controlbox"> <s:textfield theme="simple" name="sj.cwfzryx" cssClass="validate[custom[email],maxSize[55]] form-control" placeholder="请输入财务负责人邮箱"/> </div> </div> </div> </div> <div class="row jsaddremove"> <p class="modal-title-line">账户信息</p> <div class="clearfix"> <div class="form-horizontal col-md-5 form-horizontal-txt8"> <div class="form-group"> <label class="control-label">基本账号</label> <div class="form-controlbox"> <s:textfield theme="simple" name="sj.jbzh" cssClass="validate[custom[number],maxSize[20]] form-control" placeholder="请输入基本账号"/> </div> </div> </div> <div class="form-horizontal col-md-5 form-horizontal-txt8"> <div class="form-group"> <label class="control-label">开户行名称</label> <div class="form-controlbox"> <s:textfield theme="simple" name="sj.khhmc" cssClass="validate[maxSize[100]] form-control" placeholder="请输入开户行名称"/> </div> </div> </div> <div class="form-horizontal-txt8 col-md-2"> <a href="javascript:;" class="righttxt" onclick="addZhData();"><i class="fa-plus-circle colgreen"></i></a> </div> </div> </div> <div class="row"> <div class="form-horizontal col-md-12 form-horizontal-txt8"> <div class="form-group"> <div class="form-controlbox"> <button type="button" class="btn btn-primary" onclick="save('sjForm-add')">保存</button> <button type="button" class="btn btn-default">重置</button> <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> </div> </div> </div> </div> </div> </div> </div> </div> </s:form> <script>$(function() {webInit("sjForm-add");});</script>
JavaScript
/** * 保存 */ function save(formId){ if($("#"+formId).validationEngine("validate")){ //遮罩开启 loaddingShow(); $.ajax( { url : "Sj!save.action", type:"post", cache:false, async: false, dataType : "json", data : $("#"+formId).serialize(), success : addSucc, error : addErr }); } } /** * 模块添加成功 */ function addSucc(data) { //遮罩关闭 loadingHide(); if(data.status=="SUCC"){ $("#addModal").modal("hide"); $("#editModal").modal("hide"); searchByData(1); }else{ alert("商家保存失败！") } return; } /** * 模块添加失败 */ function addErr() { //遮罩关闭 loadingHide(); alert("商家保存失败！"); return; }
这样，我们就可以把序列化的值传给ajax()作为url的参数，轻松使用ajax()提交form表单了，而不需要一个一个获取表单中的值然后传给ajax()
2019-12-12新增
serialize()函数用于序列化一组表单元素，将表单内容编码为用于提交的字符串。
serialize()函数常用于将表单内容序列化，以便用于AJAX提交。
该函数主要根据用于提交的有效表单控件的name和value，将它们拼接为一个可直接用于表单提交的文本字符串，该字符串已经过标准的URL编码处理(字符集编码为UTF-8)。
该函数不会序列化不需要提交的表单控件，这和常规的表单提交行为是一致的。例如：不在<form>标签内的表单控件不会被提交、没有name属性的表单控件不会被提交、带有disabled属性的表单控件不会被提交、没有被选中的表单控件不会被提交。