這是一個簡單的前台短信驗證碼功能 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>