【WEB前端开辟】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抓取表单数据的细致内容，更多请关注ki4网别的相干文章！