AJAX避免用戶重復(fù)提交請求實現(xiàn)方案
更新時間：2013年04月03日 16:50:45 作者：
為了避免因某些原因用戶同時多次點擊按鈕，提交重復(fù)的請求，我們需要禁用請求提交按鈕，接下來與大家一起分享下實現(xiàn)方法
在使用AJAX(jQuery)異步請求數(shù)據(jù)時，為了避免因某些原因用戶同時多次點擊按鈕，提交重復(fù)的請求，我們需要禁用請求提交按鈕。
重點：jQuery的 attr 和 removeAttr 兩個函數(shù)，主要是元素button的disabled屬性。
Demo：
<body>
<a class="disabled">Button disabeld</a> <a class="abled">Button abled</a><br/><br/>
<input type="button" id="submit" name="submit" value="submit">
</body>
<script type="text/javascript" src="../jquery-1.2.6.js"></script>
<script type="text/javascript">
$(function(){
//使其失效
$(".disabled").click(function(){
$("#submit").attr("disabled","disabled");
$("#submit").val('disabled...');
});
//激活
$(".abled").click(function(){
$("#submit").removeAttr("disabled");
$("#submit").val('submit');
});
//操作請求
$("#submit").click(function() {
$("#submit").attr("disabled", "disabled");
alert("hi");//send ajax request
$("#submit").removeAttr("disabled");
});
});
</script>
說明：當(dāng)點擊"Button disabeld"后，使用 $( "#submit" ).attr("disabled","disabled") 語句禁用測試按鈕，實質(zhì)是給測試按鈕增加一個disabled屬性，然后點擊"Button abled"或執(zhí)行發(fā)送ajax()請求，當(dāng)請求完全后，使用 $("#submit").removeAttr("disabled"); 語句去除禁用按鈕屬性，從而實現(xiàn)了禁用按鈕，避免重復(fù)發(fā)送請求。
重點：jQuery的 attr 和 removeAttr 兩個函數(shù)，主要是元素button的disabled屬性。
Demo：
復(fù)制代碼 代碼如下:
<body>
<a class="disabled">Button disabeld</a> <a class="abled">Button abled</a><br/><br/>
<input type="button" id="submit" name="submit" value="submit">
</body>
<script type="text/javascript" src="../jquery-1.2.6.js"></script>
<script type="text/javascript">
$(function(){
//使其失效
$(".disabled").click(function(){
$("#submit").attr("disabled","disabled");
$("#submit").val('disabled...');
});
//激活
$(".abled").click(function(){
$("#submit").removeAttr("disabled");
$("#submit").val('submit');
});
//操作請求
$("#submit").click(function() {
$("#submit").attr("disabled", "disabled");
alert("hi");//send ajax request
$("#submit").removeAttr("disabled");
});
});
</script>
說明：當(dāng)點擊"Button disabeld"后，使用 $( "#submit" ).attr("disabled","disabled") 語句禁用測試按鈕，實質(zhì)是給測試按鈕增加一個disabled屬性，然后點擊"Button abled"或執(zhí)行發(fā)送ajax()請求，當(dāng)請求完全后，使用 $("#submit").removeAttr("disabled"); 語句去除禁用按鈕屬性，從而實現(xiàn)了禁用按鈕，避免重復(fù)發(fā)送請求。
相關(guān)文章
django使用ajax post數(shù)據(jù)出現(xiàn)403錯誤如何解決
在django中，使用jquery ajax post數(shù)據(jù)，會出現(xiàn)403的錯誤，該如何解決呢？下面由腳本之家小編幫大家解決django使用ajax post數(shù)據(jù)出現(xiàn)403錯誤，需要的朋友可以參考下2015-09-09
Ajax讀取XML實現(xiàn)動態(tài)下拉導(dǎo)航
Ajax讀取XML實現(xiàn)動態(tài)下拉導(dǎo)航...2007-02-02
AJAX跨域請求之JSONP獲取JSON數(shù)據(jù)
JSONP(JSON with Padding)是一個非官方的協(xié)議，它允許在服務(wù)器端集成Script tags返回至客戶端，通過javascript callback的形式實現(xiàn)跨域訪問（這僅僅是JSONP簡單的實現(xiàn)形式）。2015-09-09
ajax設(shè)置async校驗用戶名是否存在的實現(xiàn)方法
下面小編就為大家?guī)硪黄猘jax設(shè)置async校驗用戶名是否存在的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
客戶端通過瀏覽器的內(nèi)置對象XMLHttpRequest來發(fā)送異步請求，當(dāng)服務(wù)器返回響應(yīng)時，會調(diào)用先前注冊的回調(diào)函數(shù)，異步請求不會阻塞客戶端的操作，達到頁面無法刷新就可以更新數(shù)據(jù)的效果2013-09-09
今天小編就為大家分享一篇解決ajax傳過來的值后臺接收不到的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
ajax動態(tài)賦值echarts的實例(餅圖和柱形圖)
下面小編就為大家分享一篇ajax動態(tài)賦值echarts的實例(餅圖和柱形圖)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
我很開心您來閱讀我寫的關(guān)于ajax的實例教程,無論您是第一次還是老朋友.我將在這里獻上我至今所學(xué),并毫不吝嗇。2010-10-10
這篇文章主要為大家詳細介紹了Ajax實現(xiàn)一個漂亮、安全登錄界面的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
本文是小編日常整理些有關(guān)jquery ajax()參數(shù)詳解，由于jquery ajax方法參數(shù)比較多，靠大腦記住有點犯難，下面小編把內(nèi)容整理分享到腳本之家網(wǎng)站，供大家參考2015-10-10