JQuery Ajax() serialize()方法提交Form表單數據

時間 2020-05-06

標籤 jquery ajax serialize 方法提交 form 表單數據欄目 JQuery 简体版

原文原文鏈接

今天在用Ajax作一個添加模塊的時候，所需參數太多，因此想到了serialize()方法。javascript

serialize() 方法經過序列化表單值，建立 URL 編碼文本字符串。css

您能夠選擇一個或多個表單元素（好比 input 及/或文本框），或者 Form 元素自己。html

序列化的值可在生成 Ajax 請求時用於 URL 查詢字符串中。java

語法： $(selector).serialize() web

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">&times;</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; }