layui获取表单数据的步骤

发布时间:2020-06-25 17:19:56 作者:Leah
来源:亿速云 阅读:2690

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

推荐阅读:
  1. 使用layui弹出表单的方法
  2. layui的表单验证

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

layui 表单数据

上一篇:java读取和写入文件时乱码怎么解决

下一篇:为什么说php对新手很友好

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》