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做数据表格的时候,插入的数据的id是不是一组连续的数字,那么就需要用到layui的cols的type属性。table.render({ elem:'#test' ,url:'${pag

layui如何实现表格反转?简单实现方式介绍

表格反转,或者叫行列转换,估计都不陌生,先看效果图:测试页面:https://sun_zoro.gitee.io/layuitableplug/testTableCheckboxDisabled相对标

layui兼不兼容ie8?

layui兼不兼容ie8?layui兼容ie8,layui兼容人类正在使用的全部浏览器(IE6/7除外),可作为PC端后台系统与前台界面的速成开发方案。layui(谐音:类UI)是一款采用自身模块规范

详解layui后台框架的搭建

layui(谐音:类UI)是一款采用自身模块规范编写的前端UI框架,遵循原生HTML/CSS/JS的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到

layui是什么时候开发的?

layui(谐音:类UI)是一款采用自身模块规范编写的前端UI框架,遵循原生HTML/CSS/JS的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到

layui弹窗如何禁止拉伸?

弹层组件文档-layui.layerayer至今仍作为layui的代表作,她的受众广泛并非偶然,而是这数年来的坚持、不弃的执念,将那些不屑的眼光转化为应得的尊重,不断完善和维护、不断建设和提升社区服务

layui框架中常见表单排版:水平+垂直排版

平常我们经常用到的表单排版方式常见的有两种,layui文档中已经给出垂直的排版方式,来源:https://www.layui.com/doc/element/form.html。我们做后台的时候也会用

layui数据表格删除当前行的方法

数据表格如下:t2={ elem:'#test2', data:tableData2, page:false, width:$(parent.window).width()-50, cols:[[ {

layui如何实现下载功能?

layui实现下载功能的方法:a标签中的href属性可以直接给下载链接的地址,点击的时候会自动跳出下载保存窗口。用原生上传文件标签上传文件,获取上传文件的全路径:$('#file').change(f

浅谈layui中的table字段筛选功能

table模块在layui2.0的版本中全新推出,是layui框架最核心的组成之一。本篇文章就来为大家介绍一下layui框架的table模块的字段筛选功能,希望对大家有一定的帮助。先看效果,使用过ex

浅谈layui表单中的inline和block

layui表单中的inline和block:block:block元素会独自占一行,多个block元素各自新起一行,默认情况下,block元素宽度自动填充其父元素宽度 单行输入框 验证必填项

layui怎么固定表格的表头?

步骤:1、设置两个table,第一个table有thead没有tbody,第二个table有tbody没有table;2、第二个table需要一个div包住,并设置宽高,可用绝对布局3、tr下的th和

layui中关于弹出层关闭和刷新问题

描述:主页面,弹出第一个弹框,第一个弹框中在弹出第二个弹框,如图:1是主页面,2是子弹窗,3是孙弹窗功能一:好了,第一个我要实现的功能是点击弹窗3的确定之后关闭弹窗3上js代码,先贴出如何在主页面1中

浅谈layui标签输入框inputTags

layui标签输入框inputTags样式:目录结构:页面代码: inputTags layui.config({ base:'js/

浅谈layui文件上传、预览及修改

单文件上传1、HTML &#xe67c;上传客服二维码 * 开始上传 温馨提示:每次最多上传一张图片,单张图片的大小不超过2MB 2、js部分varform=layui.for

layui同页面如何显示多种时间样式?

Layui时间模块同页面显示多种时间样式layui时间模块主要以:年选择器、年月选择器、日期选择器、时间选择器、日期时间选择器等五种类型的选择方式为基本核心,并且均支持范围选择(即双控件)。代码如下:

layui是基于vue的吗?

layui是一款采用自身模块规范编写的前端UI框架,遵循原生HTML/CSS/JS的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到API的每一处细

浅谈layui数据表格的基础使用

表格展示神器之一:layui表格前言:在写后台管理系统中使用最多的就是表格数据展示了,使用表格组件能提高大量的开发效率,目前主流的数据表格组件有bootstraptable、layuitable、ea

layui如何清除表单数据?

layui清空表单数据的方法:1、调用reset()方法清空functionfomrReset() { document.getElementById("myform").reset(); }2、使用

layui中如何获取表格全部数据?

layui中获取表格全部数据第一步可以通过layui.table.cache["testReload"]的方式来获取表格全部数据,其中testReload是表格id第二步打开网页,我们可以看一下要获取