jquery ajax的success回調(diào)函數(shù)中實現(xiàn)按鈕置灰倒計時
更新時間：2013年11月19日 17:34:09 作者：
實現(xiàn)異步手機發(fā)送短信成功之后在ajax的success回調(diào)中實現(xiàn)將發(fā)送按鈕置灰并倒計時，具體的實現(xiàn)示例如下，喜歡的朋友可以研究下
主要是實現(xiàn)異步手機發(fā)送短信成功之后在ajax的success回調(diào)中實現(xiàn)將發(fā)送按鈕置灰并倒計時，剛開始一直報js錯誤，問題可能出在于調(diào)用ajax之后this被更新，隨意在這之前先把this對象賦給一個變量就沒問題
按鈕倒計時代碼
var wait = 60;
get_code_time = function (o) {
if (wait == 0) {
o.removeAttribute("disabled");
o.value = "免費獲取驗證碼";
wait = 60;
} else {
o.setAttribute("disabled", true);
o.value = "(" + wait + ")秒后重新獲取";
wait--;
setTimeout(function() {
get_code_time(o)
}, 1000)
}
}
獲取手機短信之后調(diào)用get_code_time函數(shù)代碼
//重新獲取驗證碼
$('#codeagain').click(function() {
var o = this;
$.ajax({
url:"Tea_sendCode.action?jsoncallback=?",
type:"post",
data: {accountId:accountId},
dataType: "json",
success: function (data) {
if(data.status == 1 && data.code == 200){
alert("驗證碼已發(fā)送至您的手機");
get_code_time(o);
} else {
if(data.msg != ""){
alert(data.msg);
} else {
alert("短信驗證碼發(fā)送失敗");
}
}
},
error: function (data) {
if(data.status == 0) {
alert(data.msg);
} else {
alert("短信驗證碼發(fā)送失敗");
}
}
});
});
按鈕倒計時代碼
復(fù)制代碼 代碼如下:
var wait = 60;
get_code_time = function (o) {
if (wait == 0) {
o.removeAttribute("disabled");
o.value = "免費獲取驗證碼";
wait = 60;
} else {
o.setAttribute("disabled", true);
o.value = "(" + wait + ")秒后重新獲取";
wait--;
setTimeout(function() {
get_code_time(o)
}, 1000)
}
}
獲取手機短信之后調(diào)用get_code_time函數(shù)代碼
復(fù)制代碼 代碼如下:
//重新獲取驗證碼
$('#codeagain').click(function() {
var o = this;
$.ajax({
url:"Tea_sendCode.action?jsoncallback=?",
type:"post",
data: {accountId:accountId},
dataType: "json",
success: function (data) {
if(data.status == 1 && data.code == 200){
alert("驗證碼已發(fā)送至您的手機");
get_code_time(o);
} else {
if(data.msg != ""){
alert(data.msg);
} else {
alert("短信驗證碼發(fā)送失敗");
}
}
},
error: function (data) {
if(data.status == 0) {
alert(data.msg);
} else {
alert("短信驗證碼發(fā)送失敗");
}
}
});
});
您可能感興趣的文章:
- jQuery Ajax Post 回調(diào)函數(shù)不執(zhí)行問題的解決方法
- Jquery版本導(dǎo)致Ajax不執(zhí)行success回調(diào)函數(shù)
- jQuery Tips 為AJAX回調(diào)函數(shù)傳遞額外參數(shù)的方法
- jQuery AJAX回調(diào)函數(shù)this指向問題
- jquery中的ajax如何返回結(jié)果而非回調(diào)方式即為同順序執(zhí)行
- 使用jQuery中的when實現(xiàn)多個AJAX請求對應(yīng)單個回調(diào)的例子分享
- jquery ajax 向后臺傳遞數(shù)組參數(shù)示例
- Jquery中ajax方法data參數(shù)的用法小結(jié)
- 淺析jQuery Ajax請求參數(shù)和返回數(shù)據(jù)的處理
- jQuery實現(xiàn)ajax回調(diào)函數(shù)帶入?yún)?shù)的方法示例
相關(guān)文章
ajax俗稱無刷新登錄或局部刷新登錄，這樣可以提高用戶體驗了，文章講到了關(guān)于基于jquery ajax用法返回數(shù)據(jù)與實例2用戶無刷新登錄2012-04-04
為了提高用戶體驗度，我們通常會給出 “正在處理，請稍等！”諸如此類的提示。我們可通過設(shè)置$.ajax()下的參數(shù)beforeSend()來實現(xiàn)2014-09-09
js制作帶有遮罩彈出層實現(xiàn)登錄注冊表單特效代碼分享
這篇文章主要為大家詳細(xì)介紹了js制作帶有遮罩彈出層實現(xiàn)登錄注冊表單代碼特效，推薦給大家，有需要的小伙伴可以參考下。2015-09-09
各瀏覽器中querySelector和querySelectorAll的實現(xiàn)差異分析
querySelector和querySelectorAll的參數(shù)須是符合 css selector 的字符串。不同的是querySelector返回的是一個對象，querySelectorAll返回的一個集合(NodeList)2012-05-05
用JQUERY疊加兩個INPUT框來實現(xiàn)登陸中需要輸入的用戶名、密碼來實現(xiàn)提示與用戶的輸出，使用jquery在一個INPUT框中即可實現(xiàn)2014-01-01
這篇文章主要介紹了Validform驗證時可以為空否則按照指定格式驗證的相關(guān)資料,需要的朋友可以參考下2017-10-10
這篇文章主要介紹了jQuery中的val()的使用,需要的朋友可以參考下2014-02-02
jQuery實現(xiàn)可用于博客的動態(tài)滑動菜單完整實例
這篇文章主要介紹了jQuery實現(xiàn)可用于博客的動態(tài)滑動菜單代碼,可實現(xiàn)jQuery基于鼠標(biāo)事件動態(tài)操作頁面元素變換的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09
使用jquery插件實現(xiàn)等寬輸出文字，具體的調(diào)用及實現(xiàn)如下，感興趣的朋友可以參考下，希望對大家有所幫助2013-09-09
jquery radio的取值_radio的選中_radio的重置方法
下面小編就為大家?guī)硪黄猨query radio的取值_radio的選中_radio的重置方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-09