快捷導(dǎo)航

防止重復(fù)提交僅提交一次的終極絕殺技

更新時(shí)間：2010年08月16日 23:27:21 作者：

防止重復(fù)提交，通用的思路，就是當(dāng)用戶點(diǎn)擊提交按鈕后，在瀏覽器中用JS將按鈕disable掉，從而阻止用戶繼續(xù)點(diǎn)擊該按鈕，實(shí)現(xiàn)防止重復(fù)提交的目的。網(wǎng)上防止重復(fù)提交的文章已經(jīng)不少了，為啥我還要寫呢，顯然我不是吃飽了撐的。。。

作者：Silent Void
出處：http://happyhippy.cnblogs.com/
最近一個(gè)客戶，老抱怨每個(gè)月總有幾條重復(fù)的業(yè)務(wù)數(shù)據(jù)；但創(chuàng)建該業(yè)務(wù)數(shù)據(jù)的頁(yè)面，我們已經(jīng)應(yīng)用了常規(guī)的防重復(fù)提交技術(shù)，為啥還這樣呢……
1. 常規(guī)防重復(fù)提交

復(fù)制代碼代碼如下:

<asp:Button runat="server" ID="btnPostBack1" Text="按我1" UseSubmitBehavior="false" OnClientClick="this.disabled=true;this.form.submit();"/>

這里需要注意的是：
(1). UseSubmitBehavior="false" ：需要設(shè)置成false，這樣生成了個(gè)的input的類型才是button；如果用默認(rèn)的true，生成的input的類型為submit，postback到服務(wù)器端，將不會(huì)觸發(fā)button的服務(wù)器端事件；
(2). Button不能有ValidationGroup屬性，否則，postback到服務(wù)器端，將不會(huì)觸發(fā)button的服務(wù)器端事件；

2. 當(dāng)遇上Validator控件
如果頁(yè)面上使用了Validator控件，繼續(xù)使用上面1種的方法，我們會(huì)發(fā)現(xiàn)，Validator控件失效了。因?yàn)閷utton disable掉后，提交的時(shí)候?qū)⒉辉偈褂肰alidator控件進(jìn)行校驗(yàn)。
針對(duì)此問(wèn)題，一個(gè)解決方案，就是提交前手動(dòng)校驗(yàn)一次。如果我們用IE Develop tool來(lái)跟蹤提交的JS代碼，我們會(huì)發(fā)現(xiàn)asp.net是在Page_ClientValidate函數(shù)中來(lái)完成Validator中設(shè)置的校驗(yàn)，所以下面手工調(diào)用一次該方法，如果校驗(yàn)失敗，則不提交：

復(fù)制代碼代碼如下:

 
1: <script type="text/javascript"> 
function disableButton(button) 
{ 
if (typeof (Page_ClientValidate) == 'function' && Page_ClientValidate() == false) 
{ 
return false; 
} 
button.disabled = true; 
return true; 
} 
</script> 

<div> 
<asp:TextBox runat="server" ID="tbxInput1"></asp:TextBox> 
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="tbxInput1" 
ValidationGroup="Group1" ErrorMessage="*"></asp:RequiredFieldValidator> 
<asp:Button runat="server" ID="btnPostBack1" Text="按我1" UseSubmitBehavior="false" 
OnClientClick="disableButton(this);" OnClick="btnPostBack_Click"> 
</asp:Button> 
</div> 

說(shuō)明：如果頁(yè)面上有多個(gè)Validator控件，并且多個(gè)Button需要進(jìn)行分組校驗(yàn)，則只需要設(shè)置Button的ValidationGroup即可。
上面的這個(gè)方法，貌似已經(jīng)完美了；通常情況下，文章寫到這里也該結(jié)束了，我們的系統(tǒng)也是這么使用的。但是……最近一個(gè)客戶，老抱怨每個(gè)月總有幾條重復(fù)的業(yè)務(wù)數(shù)據(jù)。。。
. 當(dāng)用戶的點(diǎn)擊速度足夠快……
根據(jù)客戶的反饋信息，我們查了下那幾條重復(fù)的業(yè)務(wù)數(shù)據(jù)，發(fā)現(xiàn)同樣的記錄偶爾會(huì)出現(xiàn)兩次，并且DB中記錄的創(chuàng)建時(shí)間完全相等(精確到毫秒)。然后也讓用戶的演示了一下她日常的操作方式，發(fā)現(xiàn)她點(diǎn)鼠標(biāo)相當(dāng)?shù)目?；雖然沒(méi)有重現(xiàn)問(wèn)題，但我們也大致知道問(wèn)題的可能原因了：當(dāng)用戶點(diǎn)擊的速度足夠快，瀏覽器還沒(méi)有來(lái)得及將button禁用掉，用戶又點(diǎn)擊了第二次……
為了重現(xiàn)問(wèn)題，我們做了如下測(cè)試：

復(fù)制代碼代碼如下:

 
<script type="text/javascript"> 
function disableButton(button) //, validateGroup) 
{ 
if (typeof (Page_ClientValidate) == 'function' && Page_ClientValidate() == false) 
{ 
return false; 
} 
button.disabled = true; 
} 

function doubleClick() 
{ 
var button1 = document.getElementById('btnPostBack1'); 
button1.onclick(); 
button1.onclick(); //模擬重復(fù)點(diǎn)擊2次 
} 
</script> 


<div> 
<asp:TextBox runat="server" ID="tbxInput1"></asp:TextBox> 
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="tbxInput1" 
ValidationGroup="Group1" ErrorMessage="*"></asp:RequiredFieldValidator> 
<asp:Button runat="server" ID="btnPostBack1" Text="按我1" UseSubmitBehavior="false" 
ValidationGroup="Group1" OnClientClick="disableButton(this);" OnClick="btnPostBack_Click"> 
</asp:Button> 
</div> 
<input type="button" onclick="doubleClick();" value="點(diǎn)擊一次，模擬連續(xù)點(diǎn)擊'按我1'兩次" /> 

然后頁(yè)面后臺(tái)代碼如下：

復(fù)制代碼代碼如下:

 
public static int i = 0; 
protected void btnPostBack_Click(object sender, EventArgs e) 
{ 
Response.Write(((Button)sender).Text + " " + (++i).ToString());//將累加結(jié)果輸出 
} 

每次頁(yè)面PostBack時(shí)，全局變量+1，如果連續(xù)PostBack兩次，則得到的是+2的累計(jì)。測(cè)試的結(jié)果：除了偶爾+1，大部分情況都是累加2……看來(lái)，如果用戶點(diǎn)擊鼠標(biāo)的速度足夠快，前面2中的辦法還是無(wú)法杜絕重復(fù)提交，咋辦呢？？？

4. 終極絕殺技

處理思路就是，用數(shù)組記錄用戶的點(diǎn)擊時(shí)間，如果點(diǎn)擊時(shí)間小于某個(gè)時(shí)間間隔(下面演示的1秒，即1000毫秒)，則認(rèn)為是重復(fù)提交，并取消當(dāng)前點(diǎn)擊事件，直接上代碼了：

復(fù)制代碼代碼如下:

 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<script type="text/javascript"> 
var date = new Array(); 
function disableButton(button, validateGroup) 
{ 
date.push(new Date()); 
if (date.length > 1 
&& (date[date.length - 1].getTime() - date[date.length - 2].getTime() < 1000))//小于1秒則認(rèn)為重復(fù)提交 
{ 
event.cancelBubble = true; //測(cè)試時(shí)發(fā)現(xiàn)，如果直接單獨(dú)設(shè)置cancelBubble、或者returnValue來(lái)取消事件，經(jīng)常取消不了，依然存在重復(fù)提交的可能。因此只好用返回值來(lái)實(shí)現(xiàn)手工控制！ 
return false; 
} 
if (typeof (Page_ClientValidate) == 'function' 
&& ((validateGroup == undefined && Page_ClientValidate() == false) 
|| (validateGroup != undefined && Page_ClientValidate(validateGroup) == false))) 
{ //如果指定了ValidateGroup，則只驗(yàn)證改組；如果未指定，則驗(yàn)證全部驗(yàn)證控件 
return false; 
} 

button.disabled = true; 
return true; 
} 

function doubleClick() 
{ 
var button1 = document.getElementById('btnPostBack1'); 
button1.onclick(); 
button1.onclick(); 
} 
</script> 
</head> 
<body> 
<form id="form" runat="server"> 
<div> 
<asp:TextBox runat="server" ID="tbxInput1"></asp:TextBox> 
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="tbxInput1" 
ValidationGroup="Group1" ErrorMessage="*"></asp:RequiredFieldValidator> 
<asp:Button runat="server" ID="btnPostBack1" Text="按我1" UseSubmitBehavior="false" 
ValidationGroup="Group1" OnClientClick="if(!disableButton(this, 'Group1')) return false;" OnClick="btnPostBack_Click"> 
</asp:Button> 
</div> 
<div> 
<asp:TextBox runat="server" ID="tbxInput2"></asp:TextBox> 
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="tbxInput2" 
ValidationGroup="Group2" ErrorMessage="*"></asp:RequiredFieldValidator> 
<asp:Button runat="server" ID="btnPostBack2" Text="按我2" UseSubmitBehavior="false" 
OnClientClick="if(!disableButton(this)) return false;" OnClick="btnPostBack_Click"> 
</asp:Button> 
</div> 
<input type="button" onclick="doubleClick();" value="點(diǎn)擊一次，模擬連續(xù)點(diǎn)擊'按我1'兩次" /> 
</form> 
</body> 
</html> 

說(shuō)明：
(1). 測(cè)試時(shí)發(fā)現(xiàn)，如果直接單獨(dú)設(shè)置cancelBubble、或者returnValue來(lái)取消事件，經(jīng)常取消不了，依然存在高頻率的重復(fù)提交。因此只好用返回值來(lái)實(shí)現(xiàn)手工控制；
(2). disableButton接收一個(gè)validateGroup參數(shù)，如果指定了ValidateGroup，則只驗(yàn)證改組；如果未指定，則驗(yàn)證全部驗(yàn)證控件。

您可能感興趣的文章: