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

这样，咱们就能够把序列化的值传给ajax()做为url的参数，轻松使用ajax()提交form表单了，而不须要一个一个获取表单中的值而后传给ajax()ajax

2019-12-12新增json

serialize()函数用于序列化一组表单元素，将表单内容编码为用于提交的字符串。async

serialize()函数经常使用于将表单内容序列化，以便用于AJAX提交。ide

该函数主要根据用于提交的有效表单控件的name和value，将它们拼接为一个可直接用于表单提交的文本字符串，该字符串已通过标准的URL编码处理(字符集编码为UTF-8)。函数

该函数不会序列化不须要提交的表单控件，这和常规的表单提交行为是一致的。例如：不在<form>标签内的表单控件不会被提交、没有name属性的表单控件不会被提交、带有disabled属性的表单控件不会被提交、没有被选中的表单控件不会被提交。