在一个项目中,我们最频繁的操作是CRUD,所以一定有涉及到按钮的操作。比如:确认保存,确认编辑,确认删除等等。所以,为了避免表单进行多次提交就显得特别地重要。

代码实现

知识点

$(':button')
// 选择 type="button" 的 <button> 元素和 <input> 元素
            form.on('submit(saveBtn)', function (data) {

                  var DISABLED = 'layui-btn-disabled';

                  $(':button').addClass(DISABLED); // 添加样式

                  $(':button').attr('disabled', 'disabled');  // 添加属性
axios({
method:"post"
...

如果请求失败,可以将响应失败移除样式,可再次提交

      $(':button').removeClass(DISABLED);

      $(':button').removeAttr('disabled');

实现效果

点击前



点击后

补充 方法二

如果使用了axios,我们可以设置axios取消某个请求以及全局拦截器阻止重复请求

实现的方法,可以见第二个参考链接

参考链接:

https://www.cnblogs.com/lovebing/p/14041523.html

https://blog.csdn.net/amnesiac666/article/details/112021804

layui处理表单/按钮进行多次提交的更多相关文章

  1. 20181019 记录 window.setTimeout('dofunction()',2000); - layui form 表单提交 事件 - F11全屏 事件 window.onresize

    1 延时事件 window.setTimeout('dofunction()',2000); 函数外面要有引号 如果没有引号 就不能延时执行 应该是内容进行eval,所以外层不是传递字符串的话,外层函 ...

  2. 修改layui的表单手机、邮箱验证可以为空怎么实现?

      修改layui的表单手机.邮箱验证可以为空   解决办法: 修改源码: 把表单验证源代码(form.js)的正则表达式改一下,例如手机的正则为:/^1d{10}$/,可以改成/^$|^1d{10} ...

  3. layui之表单验证

    这篇文章的表单验证我只是随便记录下,望各位看官理解 1.排序 验证 html代码 <div class="layui-form-item"> <label cla ...

  4. 第一百八十六节,jQuery,验证表单插件,Ajax 表单插件,验证和提交表单

    jQuery,验证表单插件,Ajax 表单插件,验证和提交表单 HTML <form id="reg" method="post" action=&quo ...

  5. jQuery实现form表单基于ajax无刷新提交方法详解

    本文实例讲述了jQuery实现form表单基于ajax无刷新提交方法.分享给大家供大家参考,具体如下: 首先,新建Login.html页面: <!DOCTYPE html PUBLIC &quo ...

  6. discuze回放提示“抱歉,您的请求来路不正确或表单验证串不符,无法提交”

    不知从哪里看到文章,但是实用: 背景:discuze就单纯的录制一个注册脚本,日志中没有报错,在报告中就提示"抱歉,您的请求来路不正确或表单验证串不符,无法提交"",以下 ...

  7. form表单按enter键自动提交的问题

    废话不多说.直接上代码. 1:form表单按enter键自动提交的情况 <!doctype html> <html lang="en"> <head& ...

  8. 将任意一个jQuery对象进行表单序列化,免除了提交请求时大量拼写表单数据的烦恼,支持键值对<name&value>格式和JSON格式。

    http://zhengxinlong.iteye.com/blog/848712 将任意一个jQuery对象进行表单序列化,免除了提交请求时大量拼写表单数据的烦恼,支持键值对<name& ...

  9. php表单加入Token防止重复提交的方法分析

    http://www.jb51.net/article/94395.htm 这篇文章主要介绍了php表单加入Token防止重复提交的方法,结合实例形式分析了Token防止重复提交的原理与使用技巧,需要 ...

随机推荐

  1. FPGA的开发板

    板卡架构 板载FPGA(K7-325T)处理24端口10/100/1000M以太网数据: FPGA外挂4Gbit的DDR3颗粒,最大支持800MHz: 板载CPU进行系统配置.管理,并与客户端软件通信 ...

  2. golang 微服务以及相关web框架

    golang 中国gocn golang Applicable to all database connection pools xorm是一个简单而强大的Go语言ORM库,通过它可以使数据库操作非常 ...

  3. Python爬虫知识

    一.爬虫 1.概述 网络爬虫,搜索引擎就是爬虫的应用者. 2.爬虫分类 (1)通用爬虫,常见就是搜索引擎,无差别的收集数据,存储,提取关键字,构建索引库,给用户提供搜索接口. 爬取一般流程: 初始化一 ...

  4. 混合编程:如何用python11调用C++

    摘要:在实际开发过程中,免不了涉及到混合编程,比如,对于python这种脚本语言,性能还是有限的,在一些对性能要求高的情景下面,还是需要使用c/c++来完成. 那怎样做呢?我们能使用pybind11作 ...

  5. C# 获取网页信息

    获取网页源码 ///通过HttpWebResponse public string GetUrlHtml(string url) { string strHtml = string.Empty; Ht ...

  6. python3 byte,int,str转换

    1 # bytes 与 int 2 b=b'\x01\x02' 3 num=int.from_bytes(b,'little') 4 print('bytes转int:',num) 5 6 b1=nu ...

  7. Django使用数据库(配置数据库,基本的增删改查a)

    第一步在setting文件中配置DATABASES设置 然后更改__init__文件 打开APP中models文件,导入并创建数据库 最后打开终端执行以下命令 python manage.py mak ...

  8. HashMap 这套八股,不得背个十来遍?

    尽人事,听天命.博主东南大学硕士在读,热爱健身和篮球,乐于分享技术相关的所见所得,关注公众号 @ 飞天小牛肉,第一时间获取文章更新,成长的路上我们一起进步 本文已收录于 「CS-Wiki」Gitee ...

  9. vue+element+oss实现前端分片上传和断点续传

    纯前端实现: 切片上传 断点续传 .断点续传需要在切上上传的基础上实现 前端之前上传OSS,无需后端提供接口.先上完整代码,直接复制,将new OSS里的参数修改成自己公司OSS相关信息后可用,如遇问 ...

  10. Scrum完整项目实例

    一.背景 在谈 JIRA 之前,就不得不说说敏捷开发了.正式由于项目是基于敏捷开发进行的,因此才引入了 JIRA 这款适合于敏捷开发的项目管理工具.当然,这里不会大篇章的介绍敏捷开发,之前的文章有详细 ...