组件 layui 表单抓取数据四步走

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