這是一個簡單的前臺短信驗證碼功能 ajax實現異步處理（發送和校驗）

時間 2019-11-10

標籤這是一個簡單前臺短信驗證碼功能 ajax 實現異步處理發送校驗欄目 Ajax 简体版

原文原文鏈接

<script type="text/javascript">
var InterValObj;
//timer變量，控制時間
var count = 60;//間隔函數，1秒執行
var curCount;//當前剩餘秒數
function sendMessage() {
curCount = count; // 設置button效果，開始計時
document.getElementById("btnSendCode").setAttribute("disabled","true" );//設置按鈕爲禁用狀態
document.getElementById("btnSendCode").value="請在" + curCount + "後再次獲取";//更改按鈕文字
InterValObj = window.setInterval(SetRemainTime, 1000); // 啓動計時器timer處理函數，1秒執行一次 // 向後臺發送處理數據
$.ajax({
type: "POST", // 用POST方式傳輸
dataType: "text", // 數據格式:JSON
url: "forgetPasswdServlet", // 目標地址
data: "flag=2",
success: function (data){
data = parseInt(data, 10);
if(data == 1){ $("#jbPhoneTip").html("<font color='#339933'>√ 短信驗證碼已發到您的手機,請查收</font>");
}else if(data == 0){
$("#jbPhoneTip").html("<font color='red'>× 短信驗證碼發送失敗，請從新發送</font>"); } } }); }
//timer處理函數
function SetRemainTime() {
if (curCount == 0) {
window.clearInterval(InterValObj);// 中止計時器
document.getElementById("btnSendCode").removeAttribute("disabled");//移除禁用狀態改成可用
document.getElementById("btnSendCode").value="從新發送驗證碼";
}else { curCount--; document.getElementById("btnSendCode").value="請在" + curCount + "秒後再次獲取"; } }
//驗證短信驗證碼
function doCompare(){
var codelast = document.getElementById("codelast").value;//獲取輸入的驗證碼
if(codelast == null || codelast == ''){ alert("驗證碼不能爲空！");
}else{
$.ajax({ type: "POST", // 用POST方式傳輸
dataType: "text", // 數據格式:JSON
url: "forgetPasswdServlet", // 目標地址
data: "flag=4&codelast="+codelast,
success: function (data){ data = parseInt(data, 10);
if(data == 1){ window.location.href='/aoyi/forgetpasswd/forgetpasswd3.jsp';//驗證成功
}else if(data == 0){
$("#jbPhoneTip").html("<font color='red'>×短信驗證碼不正確請從新輸入</font>");
}else if(data ==2){
$("#jbPhoneTip").html("<font color='red'>×驗證碼已失效請從新獲取驗證碼</font>"); } } });
} }
</script>