今天在用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屬性的表單控件不會被提交、沒有被選中的表單控件不會被提交。