组件 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。

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