繰り返しクリックすると提出防ぐ、唯一の究極の伝承スキル[コード付きHD]いったん提出

    重複送信を防ぐ、一般的な考え方は、ユーザーがブラウザに送信ボタンをクリックしたときにJSは、これにより、ユーザは、重複送信を防止する目的を達成するために、ボタンをクリックし続け防止、オフボタンを無効にすることです。オンライン資料の提出を防ぐため、繰り返しをたくさん持っている私はそれを記述する必要がなかった理由、明らかに私は十分なサポートを得ることはありませんでした。常にヶ月があり、いくつかのリピートビジネスデータを訴え最近のクライアントは、;ページを作成するのではなく、ビジネスデータ、我々は従来の抗重複応募の技術を適用しているので、なぜそれを持っている......

1.従来の抗再送信
   1: <ASP:ボタンにrunat = "サーバ" ID = "btnPostBack1"テキスト= "按我1" OnClientClick = "this.disabled = TRUE; this.form.submit();" />

:これは、ことに留意すべきである
。(1)「偽に」UseSubmitBehavior =:入力タイプの一つはボタンで生成され、falseに設定することが、真の、入力の種類が発生した場合、デフォルト提出し、サーバーへのポストバック端部は、ボタンがサーバ側のイベントをトリガしないであろう。
、そうでない場合は、サーバへのポストバックを(2)ボタンをValidationGroupプロパティを持つことができない、ボタンは、サーバー側のイベントをトリガしないであろう;

 

2.会った検証コントロール

    ページ上の検証コントロールは、上記のいずれかの種類を使用し続けた場合、我々はValidatorが無効制御し、ことがわかります。提出はもはや検証コントロールを使用して検証されませんときの後、ボタンをオフに無効にしますので。
    この問題を解決するために、解決策は、手動チェックの前に提出されます。我々はJSコード提出を追跡するためのツールを開発するIEを使用している場合、我々は、検証バリデータのセットを実行するためのasp.net Page_ClientValidate機能にありますので、以下の方法を手で一度呼び出され、チェックが失敗した場合、に提出していません。

   1: <スクリプトタイプ= "テキスト/ javascriptの" >
   2:      機能disableButton(ボタン)
   3:      {
   4:         もしtypeof演算(Page_ClientValidate)== '関数' && Page_ClientValidate()== falseの
   5:          {
   6:             返し 
   7:          }
   8:          button.disabled =  ;
   9:         返す 
  10:      }
  11: </ SCRIPT>
  12:  
  13:の<div>
  14:      <ASP:テキストボックスにrunat = "サーバ" ID = "tbxInput1" > </ ASP:テキストボックス>
  15:      <ASP:のRequiredFieldValidator ID = "RequiredFieldValidator1"にrunat = "サーバ" ControlToValidate = "tbxInput1"
  16:              ValidationGroup = "グループ1"にErrorMessage = "*" > </ ASP:のRequiredFieldValidator>
  17:      <ASP:ボタンにrunat = "サーバー" ID = "btnPostBack1"テキスト= "按我1" UseSubmitBehavior = "false"に
  18:              = "disableButton(この);" クリック時= "btnPostBack_Click" >
  19:          </ ASP:ボタン>
  20: </ DIV>

    注意:複数の検証コントロールのページで、必要なパケットのチェックサムボタンが複数ある場合は、専用に必要ValidationGroupにボタンを設定します

    通常の状況下では、エンドもここに書かれた記事は、私たちのシステムはそのように使用されます。上記の方法は、完璧に持っているようです。しかし......最近、クライアント、いくつかの古いが、毎月のリピートビジネスデータを訴え常にあります。

 

3.ユーザーは、十分に速くクリックすると......

    顧客からのフィードバックによると、今後数リピートビジネスデータは、ことがわかったことを確認時折あっ二度同じレコードもあり、DBは(ミリ秒)正確に等しい記録した時間を作成しますそして、ユーザーが操作の日常モードのビットが、彼女は非常に高速にマウスを発見した実証することができます。問題を再現していないが、しかし、我々は、一般的に、問題の原因を知っている:ユーザーが十分に速くクリックすると、ブラウザをスワップボタンを無効にする時間がなかった、ユーザは、第2回クリックした......   

 

    問題を再現するために、我々は次のテストを行いました。

ClickMe

   1: <スクリプトタイプ= "テキスト/ javascriptの" >
   2:          ファンクションdisableButton(ボタン)//、validateGroup)
   3:          {
   4:             もしtypeof演算(Page_ClientValidate)== '関数' && Page_ClientValidate()== falseの
   5:              {
   6:                 返し 
   7:              }
   8:             button.disabled = true;
   9:         }
  10:  
  11:         function doubleClick()
  12:         {
  13:             var button1 = document.getElementById('btnPostBack1');
  14:             
  15:              //模拟重复点击2次
  16:         }
  17:     </script>
  18:  
  19:  
  20:     <div>
  21:         <asp:TextBox runat="server" ID="tbxInput1"></asp:TextBox>
  22:         <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="tbxInput1"
  23:             ValidationGroup="Group1" ErrorMessage="*"></asp:RequiredFieldValidator>
  24:         <asp:Button runat="server" ID="btnPostBack1" Text="按我1" UseSubmitBehavior="false"
  25:             ValidationGroup="Group1" OnClientClick="disableButton(this);" OnClick="btnPostBack_Click">
  26:         </asp:Button>
  27:     </div>
  28:     <input type="button" onclick="doubleClick();" value="点击一次,模拟连续点击'按我1'两次" />

然后页面后台代码如下:

   1:  
   2:     public static int i = 0;
   3:     protected void btnPostBack_Click(object sender, EventArgs e)
   4:     {
   5:         Response.Write(((Button)sender).Text + "      " + (++i).ToString());//将累加结果输出
   6:     }

每次页面PostBack时,全局变量+1,如果连续PostBack两次,则得到的是+2的累计。测试的结果:除了偶尔+1,大部分情况都是累加2……看来,如果用户点击鼠标的速度足够快,前面2中的办法还是无法杜绝重复提交,咋办呢???

 

4. 终极绝杀技

ClickMe2

    处理思路就是,用数组记录用户的点击时间,如果点击时间小于某个时间间隔(下面演示的1秒,即1000毫秒),则认为是重复提交,并取消当前点击事件,直接上代码了:

   1: <html xmlns="http://www.w3.org/1999/xhtml">
   2: <head runat="server">
   3:     <script type="text/javascript">
   4:         var date = new Array();
   5:         function disableButton(button, validateGroup)
   6:         {
   7:             date.push(new Date());
   8:             if (date.length > 1
   9:                 && (date[date.length - 1].getTime() - date[date.length - 2].getTime() < ))
  10:             {
  11:                 event.cancelBubble = true; 
  12:                 return false;
  13:             }
  14:             if (typeof (Page_ClientValidate) == 'function'
  15:                 && ((validateGroup == undefined && Page_ClientValidate() == false) 
  16:                         || (validateGroup != undefined && Page_ClientValidate(validateGroup) == false)))
  17:             { 
  18:                 return false;
  19:             }
  20:  
  21:             button.disabled = true;
  22:             return true;
  23:         }
  24:  
  25:         function doubleClick()
  26:         {
  27:             var button1 = document.getElementById('btnPostBack1');
  28:             button1.onclick();
  29:             button1.onclick();
  30:         }
  31:     </script>
  32: </head>
  33: <body>
  34:     <form id="form" runat="server">
  35:     <div>
  36:         <asp:TextBox runat="server" ID="tbxInput1"></asp:TextBox>
  37:         <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="tbxInput1"
  38:             ValidationGroup="Group1" ErrorMessage="*"></asp:RequiredFieldValidator>
  39:         <asp:Button runat="server" ID="btnPostBack1" Text="按我1" UseSubmitBehavior="false"
  40:             ValidationGroup="Group1" OnClientClick="" OnClick="btnPostBack_Click">
  41:         </asp:Button>
  42:     </div>
  43:     <div>
  44:         <asp:TextBox runat="server" ID="tbxInput2"></asp:TextBox>
  45:         <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="tbxInput2"
  46:             ValidationGroup="Group2" ErrorMessage="*"></asp:RequiredFieldValidator>
  47:         <asp:Button runat="server" ID="btnPostBack2" Text="按我2" UseSubmitBehavior="false"
  48:             OnClientClick="" OnClick="btnPostBack_Click">
  49:         </asp:Button>
  50:     </div>
  51:     <input type="button" onclick="doubleClick();" value="点击一次,模拟连续点击'按我1'两次" />
  52:     </form>
  53: </body>
  54: </html>

说明:
(1). 测试时发现,如果直接单独设置cancelBubble、或者returnValue来取消事件,经常取消不了,依然存在高频率的重复提交。因此只好用返回值来实现手工控制;
(2). disableButton接收一个validateGroup参数,如果指定了ValidateGroup,则只验证改组;如果未指定,则验证全部验证控件。

 

于是,整个世界清净了。。。

ます。https://www.cnblogs.com/happyhippy/archive/2010/08/15/1800289.htmlで再現

おすすめ

転載: blog.csdn.net/weixin_34041003/article/details/94676467