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获取表单数据的步骤就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。

网页名称：layui获取表单数据的步骤
标题URL：http://cdxtjz.com/article/iiosio.html

layui获取表单数据的步骤

其他资讯