如何防止按钮重复提交的一个实践

最新推荐文章于 2022-06-28 16:20:14 发布
最新推荐文章于 2022-06-28 16:20:14 发布
阅读量2.9k 收藏
点赞数
文章标签： server xhtml object javascript div asp
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/UnOpenMyCode/article/details/7867200
版权

有时候，我们某个按钮处理的工作量很大，耗时很久，可能引发用户的误解，以为程序未响应，结果再次提交，可能导致处理逻辑执行到一半，又再次执行。

那我们有什么办法可以做到不让用户重复点击，又能给予友好的操作等待提示呢？下面是一个小小实践。

效果图:

 

前台代码：

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>如何防止按钮重复提交的一个实践</title>
     <script type="text/javascript">   
        var IsClickSumbit = false;//全局变量
        function CheckIsClickSumbit(BtnSumbit)
        {
           if(IsClickSumbit)//拦截重复点击(页面在刷新前，全局变量的值是一个静态变量)
           {
               return false;
           }
           else
           {
              document.getElementById(BtnSumbit).disabled= true;//提交按钮变灰
              document.getElementById("divImg").style.display ="block";
              document.getElementById("ImgLoadingAnimation").src="LoadingAnimation.gif"
              document.getElementById("BtnHideSumbit").click();//执行委托： protected void BtnSumbit_Click(object sender, EventArgs e)
  
              return true;
           }
          
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
      
       <asp:button ID="BtnSumbit" runat="server" Text="提   交"  OnClientClick="javascript:CheckIsClickSumbit('BtnSumbit')" style="cursor:hand" OnClick="BtnSumbit_Click" />
       <div>
         <br/>
       </div>
       <div id="divImg" style="display :none">
         <img id="ImgLoadingAnimation" src="" alt="正在处理中..." />
         <asp:LinkButton ID="BtnHideSumbit" runat="server"  OnClick="BtnSumbit_Click" Text="" /><!--注意：Text为空！故在界面上是不可见的，但是又保证了BtnHideSumbit是确实存在的一个被委托的元素-->
       </div>
    </div>
   
   
    </form>
</body>
</html>

 

后台代码：
protected void BtnSumbit_Click(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(5000);  //进度条运行5秒后然后消失，而且按钮恢复原状。
    }
安欧碰麦蔻德
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
重复提交、重复刷新、防止后退的问题以及处理方式分析
09-22
- 采用唯一标识（如UUID或时间戳）的令牌验证机制，每个请求都需要携带有效的令牌，服务器端验证后销毁，防止重复提交。 - 对于多步骤流程，使用会话管理维持每个步骤的状态，用户后退时，根据会话信息决定是否...
防止前端按钮重复提交数据问题
开源世界
10-20 1437
一、问题导入 当我们在页面进行点点点的操作时，很可能遇到点击两次的行为，这时候提交或保存按钮也没有进行校验，很可能保存两份数据，因此，作为开发人员，对需要保存类似的按钮进行校验很有必要。 二、问题分析 我们通过控制isDisable 来设置 disabled来控制按钮的点击和不可点击。 默认isDisable:的值为 false，按钮可以点击。 当我们点击这个按钮的时候，首先将按钮的绑定isDisable设置为true，1秒后立马将其置为false。此时，用户就不能多点了， 过了一秒的时间后才能去操作这个按
连续点击按钮前端防止重复提交
zuo_zuo_blog的博客
05-18 4462
当触发点击事件后,在此事件没完成之前,不能再触发点击事件,在事件完成后才能再次点击 目前想到两种解决方案 1.点击后，把按钮或链接的disabled设为true，让它变成不可用状态；请求成功之后在变成可点击状态 div按钮 <div id="but" onclick="savePay()">提交</div> .disable { pointer-events: none; } function savePay() { // 禁用点击事件 $("#but").addClass("
防止页面重复刷新、重复提交、后退的解决方案
山的那边
02-28 2501
客户端： 重复提交、重复刷新： 1.jsp页面设置page全局变量，只允许提交一次 2.将提交按钮或者image置为disabled 3.禁止客户端刷新：通过JS来控制，禁用刷新的功能、清除访问历史纪录； 防止后退： 1.更改浏览器的历史纪录 使用window.history.forward()方法，调用window.history.forward()方法即可。 "JavaScr
防止用户将表单重复提交的方法汇总
09-28
在开发多用户Web应用程序时，防止用户重复提交表单是一个重要的任务，因为它可能导致数据不一致性和其他潜在问题。以下是对四种防止表单重复提交的方法的详细说明： 1. **禁掉提交按钮**： 当用户点击提交按钮后，...
Android 快速实现防止网络重复请求&按钮重复点击的方法
08-28
在Android应用开发中，防止网络重复请求和按钮重复点击是非常重要的优化策略，它们可以提高用户体验并避免因不当操作导致的数据混乱。以下将详细介绍这两种方法的实现。 首先，防止网络重复请求是为了避免用户在短...
ladda 按钮防重复提交样式
05-18
总的来说，Ladda 是一个强大且易于使用的前端工具，它为按钮提供了加载指示器功能，同时防止了重复提交，极大地提升了用户体验。通过正确地配置和使用 Ladda，开发者可以在自己的项目中轻松实现这种高级交互。
token-springMVC 防止重复提交
08-01
在Spring MVC框架中，防止重复提交是一个重要的议题，特别是在处理敏感数据或执行不可逆操作时。重复提交可能会导致数据不一致性和系统混乱。"Token-SpringMVC"是一种常见的解决方案，它利用令牌（Token）机制来确保...
【原创】jSubmitLoading防止重复提交 v1.0
01-22
一个小巧的jquery插件 作用是禁用提交按钮，防止表单重复提交 1、禁用/启用按钮 $("#btnSub").subLoading({enabled:false}) $("#btnSub").subLoading({enabled:true}) 2、禁用后定时启用 $("#btnSub").subLoading({enabled:false,timeout:3}) 3、设置禁用时候的文本 $("#btnSub").subLoading({enabled:true}) $("#btnSub").subLoading({enabled:false,loadingText:"提交中"}) ...共3个参数，详情请见资源中的demo.html
提交表单后提交禁用提交按钮，防止重复提交
05-18
提交表单后提交禁用提交按钮，防止重复提交.
html按钮重复提交表单,表单重复提交解决方案(防止 Http 重复提交。)
weixin_39839968的博客
06-21 386
产生原因：网络延时、重新刷新、点击浏览器的【后退】按钮回退到表单页面后进行再次提交前端点击铔之后，按变灰标识2．后瑞使用 token1，使用令牌好处唯一性只能有一次请求web 安全知识点使用令解决模拟请求我現在把这个生 token 方式知道，还是能被模拟？模拟程序使用验证码模拟请求识别验证码是非常难token＋验证码使用 javascript 解决既然存在上述所说的表单重复提交问题，那么我们就要想...
防止按钮重复点击的解决方案与思路
热门推荐
ruanhongbiao的专栏
05-23 3万+
在网页开发过程中经常遇到点击按钮之后提交表单且不能重复提交表单的问题，我总结了一下常用的解决办法： 下面模拟整个过程： <html> <head> <title>测试</title> <meta charset="utf-8"> </head> ...
防止按钮重复提交问题(个人碰到问题)
qq_36878632的博客
05-17 705
jsp: <buttion type="submit" id="btn" onclick=click()></button> js function click(){ var nowTime = new Date().getTime(); var clickTime = $("#sec_next").attr("ctime...
Vue中防止按钮重复点击提交的方法
weixin_42342065的博客
06-28 9520
Vue防止按钮重复点击
如何阻止页面信息重复提交
weixin_34138521的博客
05-06 136
在注册网站，提交信息经常会因为网络等原因导致提交信息非常缓慢，这样用户会因为等待的时间过长所以产生重复提交的信息的操作，然而重复提交信息显然是不能在次写进数据库或数据存等，因此进行重复提交的处理就非常必要了。       重复提交的问题处理的核心在于：    阻止多次信息的提交，确保一份信息能够正确的写入数据库。       在做重复提交的验证的主要对表单的操作：       ...
前端vue 如何做按钮防止重复提交
最新发布
06-07
在Vue中实现按钮防止重复提交可以通过以下几个步骤： 1. 首先，在按钮上绑定一个点击事件，例如： ``` <template> <button @click="submitForm" :disabled="isSubmitting">提交</button> </template> ``` 2. 在Vue实例中定义一个布尔类型的变量`isSubmitting`，用于标识当前是否正在提交表单： ``` <script> export default { data() { return { isSubmitting: false } }, methods: { submitForm() { this.isSubmitting = true // 表单提交逻辑 // 在表单提交完成后，将isSubmitting设置为false，允许再次提交 } } } </script> ``` 3. 在表单提交逻辑中，将`isSubmitting`设置为`true`，表示正在提交表单，同时在表单提交完成后，将`isSubmitting`设置为`false`，允许再次提交。 这样，当用户点击提交按钮时，如果`isSubmitting`为`true`，则按钮会被禁用，防止重复提交。等到表单提交完成后，`isSubmitting`会被设置为`false`，按钮又可以被点击了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值