layui抓取表單數據

注意事項：

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。

2、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;
});

更多layui相關知識請關注layui框架。

以上是layui抓取表單數據的詳細內容。更多資訊請關注PHP中文網其他相關文章！