layui獲取表單數(shù)據(jù)的步驟

這篇文章將為大家詳細(xì)講解有關(guān)layui獲取表單數(shù)據(jù)的步驟，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。

成都創(chuàng)新互聯(lián)公司專注于澄城企業(yè)網(wǎng)站建設(shè),成都響應(yīng)式網(wǎng)站建設(shè),購物商城網(wǎng)站建設(shè)。澄城網(wǎng)站建設(shè)公司,為澄城等地區(qū)提供建站服務(wù)。全流程按需定制制作，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，成都創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務(wù)

注意事項(xiàng)：

1、layui 中提交按鈕是基于“監(jiān)聽”機(jī)制實(shí)現(xiàn)的。

2、form.on() 的調(diào)用需置于 layui.use 的回調(diào)函數(shù)中。

3、末尾的 'return false' 不可或缺，以確保不會觸發(fā)頁面刷新。注意必須是 'return false'，而不能簡單寫成 'return'。

抓取表單數(shù)據(jù)可按四步來實(shí)現(xiàn)：

1、禁用按鈕。防止用戶連續(xù)點(diǎn)擊，需注意，在 Ajax 請求結(jié)束后（complete）再次顯式啟用按鈕。

2、整合表單數(shù)據(jù)。很多時(shí)候，除了要獲取正式表單的數(shù)據(jù)，還需要額外追加一些數(shù)據(jù)。

3、確定路徑。有時(shí)候，同一個按鈕可以表達(dá)多種操作，比如新增或修改。

4、發(fā)起請求。發(fā)起 Ajax 請求，向服務(wù)器傳遞參數(shù)，并在回調(diào)函數(shù)中對返回值做處理。

5、return false。

重要代碼列舉

1、HTML 聲明

<form class="layui-form">
    <input type="hidden" name="id" />
    <button class="layui-btn layui-btn-sto" id="btnSave" lay-filter="btnSave" lay-submit>保存</button>
</form>

如果僅需要監(jiān)聽效果（單擊事件），則只需上述一個 button 以及 lay-filter 和 lay-submit。
如果需要收集表單元素的值，則還需要 form 以及其樣式 layui-form。

2、js 事件監(jiān)聽

// 保存
form.on('submit(btnSave)', function (data) {
    console.info('開始保存');
 
    // * 按鈕禁用
    var isDisabled = $("#btnSave").hasClass('layui-btn-disabled');
    if (isDisabled) {
        return false;
    }
 
    // * 整合表單數(shù)據(jù)
    var formData = data.field;
    $.extend(formData, { Id: $("#hiddenId").val() });
    console.info(formData);
 
    // * 確定路徑
    var url = "";
    if (editMode == "add") {
        url = urlEnum.Add;
    } else if (editMode == "update") {
        url = urlEnum.Update;
    } else {
        alert('編輯模型不確定, add / update');
        return;
    }
 
    // * 發(fā)起請求
    $.ajax({
        data: formData,
        type: "POST",
        dataType: "JSON",
        url: url,
        beforeSend: function () {
            // 禁用
            $("#btnSave").addClass('layui-btn-disabled');
        },
        complete: function () {
            // 啟用
            $("#btnSave").removeClass('layui-btn-disabled');
        },
        success: function (result) {
            console.info("保存數(shù)據(jù)成功，返回的數(shù)據(jù)為：↓ ");
            console.info(result);
 
            if (result.Status) {                            
                // 刷新列表
                parent.$("#mainGrid").bootstrapTable("selectPage", 1);
 
                // 確保在最后關(guān)閉窗體
                parent.layer.close(parent.layer.getFrameIndex(window.name));
            } else {
                // 提示失敗
                layer.alert(result.StatusMessage, { title: '提示信息', icon: 5 });
            }
        }
    }); // end ajax
 
    return false;
});

關(guān)于layui獲取表單數(shù)據(jù)的步驟就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

當(dāng)前題目：layui獲取表單數(shù)據(jù)的步驟
轉(zhuǎn)載源于：http://muchs.cn/article0/iiosio.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務(wù)、做網(wǎng)站、響應(yīng)式網(wǎng)站、定制網(wǎng)站、網(wǎng)站維護(hù)、品牌網(wǎng)站建設(shè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容