這篇文章將為大家詳細講解有關layui獲取表單數(shù)據(jù)的步驟,文章內(nèi)容質(zhì)量較高,因此小編分享給大家做個參考,希望大家閱讀完這篇文章后對相關知識有一定的了解。
成都創(chuàng)新互聯(lián)公司專注于澄城企業(yè)網(wǎng)站建設,成都響應式網(wǎng)站建設,購物商城網(wǎng)站建設。澄城網(wǎng)站建設公司,為澄城等地區(qū)提供建站服務。全流程按需定制制作,專業(yè)設計,全程項目跟蹤,成都創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務
注意事項:
1、layui 中提交按鈕是基于“監(jiān)聽”機制實現(xiàn)的。
2、form.on() 的調(diào)用需置于 layui.use 的回調(diào)函數(shù)中。
3、末尾的 'return false' 不可或缺,以確保不會觸發(fā)頁面刷新。注意必須是 'return false',而不能簡單寫成 'return'。
抓取表單數(shù)據(jù)可按四步來實現(xiàn):
1、禁用按鈕。防止用戶連續(xù)點擊,需注意,在 Ajax 請求結(jié)束后(complete)再次顯式啟用按鈕。
2、整合表單數(shù)據(jù)。很多時候,除了要獲取正式表單的數(shù)據(jù),還需要額外追加一些數(shù)據(jù)。
3、確定路徑。有時候,同一個按鈕可以表達多種操作,比如新增或修改。
4、發(fā)起請求。發(fā)起 Ajax 請求,向服務器傳遞參數(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); // 確保在最后關閉窗體 parent.layer.close(parent.layer.getFrameIndex(window.name)); } else { // 提示失敗 layer.alert(result.StatusMessage, { title: '提示信息', icon: 5 }); } } }); // end ajax return false; });
關于layui獲取表單數(shù)據(jù)的步驟就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,可以學到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到。
當前題目:layui獲取表單數(shù)據(jù)的步驟
轉(zhuǎn)載源于:http://bm7419.com/article0/iiosio.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供電子商務、做網(wǎng)站、響應式網(wǎng)站、定制網(wǎng)站、網(wǎng)站維護、品牌網(wǎng)站建設
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)