这是一个简单的前台短信验证码功能 ajax实现异步处理 (发送和校验)

时间:2023-03-09 00:59:45
这是一个简单的前台短信验证码功能 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>