組件 layui 表單抓取數據四步走 組件 layui 表單抓取數據四步走

組件 layui 表單抓取數據四步走

 

Markdown

注意事項:

  1. layui 中提交按鈕是基於「監聽」機制實現的。
  2. form.on() 的調用需置於 layui.use 的回調函數中。
  3. 末尾的 'return false' 不可或缺,以確保不會觸發頁面刷新。注意必須是 'return false',而不能簡單寫成 'return'。

抓取表單數據可按四步來實現:

  1. 禁用按鈕。防止用戶連續點擊,需注意,在 Ajax 請求結束後(complete)再次顯式啓用按鈕。
  2. 整合表單數據。不少時候,除了要獲取正式表單的數據,還須要額外追加一些數據。
  3. 肯定路徑。有時候,同一個按鈕能夠表達多種操做,好比新增或修改。
  4. 發起請求。發起 Ajax 請求,向服務器傳遞參數,並在回調函數中對返回值作處理。
  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>

若是僅須要監聽效果(單擊事件),則只需上述一個 button 以及 lay-filter 和 lay-submit。
若是須要收集表單元素的值,則還須要 form 以及其樣式 layui-form。javascript

  1. js 事件監聽
// 保存 form.on('submit(btnSave)', function (data) { console.info('開始保存'); // * 按鈕禁用 var isDisabled = $("#btnSave").hasClass('layui-btn-disabled'); if (isDisabled) { return false; } // * 整合表單數據 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; } // * 發起請求 $.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("保存數據成功,返回的數據爲:↓ "); 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; });
相關文章
相關標籤/搜索