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 声明

        保存

如果仅需要监听效果（单击事件），则只需上述一个 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如何抓取表单数据"这篇文章对大家有帮助，同时也希望大家多多支持，关注行业资讯频道，更多相关知识等着你来学习!