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

防重复提交实践

最新推荐文章于 2021-10-20 16:44:26 发布

原创最新推荐文章于 2021-10-20 16:44:26 发布 · 2.9k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#server #xhtml #object #javascript #div #asp

本文介绍了一种通过前端JS实现防止按钮重复点击的方法，并提供了一个具体的示例，包括使用全局变量来拦截重复点击、按钮禁用及加载动画显示等功能。

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

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

效果图:

前台代码：

<%@ 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="" />
       </div>
    </div>


    </form>
</body>
</html>