【layui】一个简单的防止页面重复提交的方法

基本思路是:点击提交按钮后弹出遮罩层,防止多次点击导致的重复提交。

1 <div class="layui-form-item">
2 <div class="layui-input-block t-c" >
3 <input id="file-submit" class="layui-btn" lay-submit lay-filter="demo1" value="提交"
4 type="button"/>
5 </div>
6 </div>
 1 <script>
 2
 3         layui.use([ ‘form‘, ‘jquery‘, ‘layer‘,‘upload‘], function() {
 4             var form = layui.form
 5             , $ = layui.jquery
 6             , layer = layui.layer;
 7             var upload = layui.upload;
 8             var lock = false;
 9
10             form.on(‘submit(demo1)‘, function(data){
11                 var fileName = document.getElementById("dataFile").value;
12                 if(fileName == null|| fileName == "") {
13                     layer.alert("请选择文件");
14                     return false;
15                 }
16                 layer.confirm(‘确认提交?‘, {
17                     btn: [‘确认‘, ‘取消‘]
18                 }, function(index, layero){
19                   //按钮【按钮一】的回调
20                     if(!$(".layui-layer-btn0").hasClass("layui-btn-disabled")){
21                         //$(".layui-layer-btn0")这个是确定按钮
22                         $(".layui-layer-btn0").addClass("layui-btn-disabled");
23                         layer.close(index);
24                         layer.msg(‘处理中...‘,{shade:[0.8, ‘#393D49‘],time:60*60*1000});
25
26                         $("form").submit();
27                     }
28                 }, function(index){
29                   //按钮【按钮二】的回调
30                 });
31             });
32         });
33
34     </script>

原文地址:https://www.cnblogs.com/NoctisYang/p/9166208.html

时间: 2024-12-16 02:51:46

【layui】一个简单的防止页面重复提交的方法的相关文章

第十篇 编写一个简单的注册页面

一个简单的注册页面 今天的课程学习,我们来一波综合,将前面学到的东西,做一次小练习,我们自定义一个注册页面,不需要太华丽,能表达清楚意思就可以了. <!DOCTYPE html> <html> <head lang="en"> <!--支持中文字符集--> <meta charset="UTF-8"> <!--标题--> <title>注册</title> <!--

JAVA–利用Filter和session防止页面重复提交

JAVA–利用Filter和session防止页面重复提交解决思路:1 用户访问表单页面,先经过过滤器,过滤器设置一个随机id作为token令牌, 并将该token放入表单隐藏域中.2 表单响应到浏览器,用户填充数据后提交请求;3 请求经过过滤器,过滤器获取表单中的令牌进行验证,如果和之前生成的令牌一致,则将请求放行,并且清空令牌;4 如果用户重复提交表单,请求经过过滤器,过滤器进行验证.因为第一次放行后令牌已经清空失效,令牌不一致,不放行.跳转到提醒界面. 需用知识:1 过滤器基础知识2 se

php 解决表单重复提交实现方法介绍

重复提交是我们开发中会常碰到的一个问题,除了我们使用js来防止表单的重复提交,同时还可以使用php来防止重复提交哦. 例1  代码如下 复制代码 <?php/* * php中如何防止表单的重复提交 */session_start();if (empty($_SESSION['ip'])) {//第一次写入操作,判断是否记录了IP地址,以此知道是否要写入数据库    $_SESSION['ip'] = $_SERVER['REMOTE_ADDR']; //第一次写入,为后面刷新或后退的判断做个铺垫

防止表单重复提交的方法

1.在jsp页面的button添加相关js代码: <input type="button" value="提交" onclick="this.disabled=true;this.form.submit()"> 此方法缺点是用户可能禁用js,此方法就可能失效. 2.session的token机制 防止表单重复提交的方法

【ASP.NET】 【防止连续多次点击提交按钮 导致页面重复提交】

最近做项目遇到了这样的情况: 公司网络比平常慢了不少,在点击保存按钮提交页面后需等待挺长的一段时间,忍不住手贱点多了几次,当提交完成后发现数据库语句执行异常. 两种验证方式: 第1种: aspx页面按钮: <asp:Button ID="btnSumbit" runat="server" Text="提交" onclick="btnSumbit_Click" /> Page_Load 事件: btnSumbit.A

ASP.NET Aries 入门开发教程2:配置出一个简单的列表页面

前言: 朋友们都期待我稳定地工作,但创业公司若要躺下,也非意念可控. 若人生注定了风雨飘摇,那就雨中前行了. 最机开始看聊新的工作机会,欢迎推荐,创业公司也可! 同时,趁着自由时间,抓紧把这系列教程给写完了. 谢谢大伙的关注和支持. 步骤1:准备好数据库和表(或视图) 由于框架支持跨数据库,所以可以先不用管系统权限的那个数据库,先随意找个数据库. 当然你也可以找个视图(只是视图就不能编辑或删除[权限控制]) 步骤2:配置数据库链接: 以数据库名+Conn 为name(这是跨库的约定,不要乱取).

php 解决和避免form表单重复提交的方法

在提交表单的时候,可能遇到网速等导致页面突然加载变慢,用户重复地点击提交按钮,将在数据库产生多条数据,导致不可控情况. 比如下面的情况就会导致表单重复提交: 点击提交按钮两次. 点击刷新按钮. 使用浏览器后退按钮重复之前的操作,导致重复提交表单. 使用浏览器历史记录重复提交表单. 浏览器重复的HTTP请求. 网页被恶意刷新. 下面是几种解决的方法: 一:利用js设置按钮点击后变成灰色 $(document).ready(function(){ $(input:submit).click(){ s

MVC Ajax.BeginForm重复提交解决方法

mvc使用MVC Ajax.BeginForm提交的时候有重复提交结果的时候检查相关js文件引用情况, 其中mvc4注意 1 2 3 4 @Scripts.Render("~/bundles/modernizr") bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(                        "~/Scripts/jquery.unobtrusive*",

ThinkPHP 防止表单重复提交的方法

表单form中放置一个<input> 带有{$serviceToken} Controller相应的方法初始化时为其assign一个随机值,同时将该值存入session form submit到Controller时会带有当前的serviceToken,Controller对比该值与session中的是否一致, 如果二者一致,说明是第一次提交,处理业务,然后清空session: 如果二者不同,说明是重复提交,跳转. 异常:如果检测到参数异常,需要提醒重新输入,那么同样将serviceToken