layui如何抓取表單數(shù)據(jù)

這篇文章主要介紹了layui如何抓取表單數(shù)據(jù)，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

注意事項(xiàng)：

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

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

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

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

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

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

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

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

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)聽效果（單擊事件），則只需上述一個(gè) 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ā)起請(qǐng)求    $.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;});

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“l(fā)ayui如何抓取表單數(shù)據(jù)”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!