效实中学

       栏目导航 网站首页>>资源中心>>科普资料 >>计算机
共有 3485 位读者读过此文   
 

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

  发表日期:2017年2月7日            【编辑录入: 叶建勇 】      宽屏显示

js代码

<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> 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71

jsp部分代码

 <tr>
              <td>
                             <input id="btnSendCode" name="btnSendCode" type="button"   value="点击获取验证码" onclick="sendMessage();" />
              </td>

  </tr>

  <tr>

             <td align="center"  style="font-size: 18px;font-weight:bold; ">
                 输入验证码:<input style="height: 25px" type="text" name="codelast" id="codelast">
             </td>
</tr>

<tr>             
              <td align="center"><span id="jbPhoneTip"></span></td>//根据后台返回data值显示不同信息
 </tr>

 <tr>

              <td align="center"><input type="button" onClick="doCompare();" value="下一步"  class="button4"></td>

 </tr>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24

发送验证码接口

/**
* 发送验证码
* @Title: setCode
* @Description: TODO
* @param @param request
* @param @param response
* @param @throws ServletException
* @param @throws IOException    
* @return void    
* @throws
*/
public void setCode(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException{
HttpSession session = request.getSession();

JSONHttpClient jsonHttpClient = JSONHttpClient.getInstance("wt.3tong.net");
String phonenum = (String)session.getAttribute("phonenum");

response.setContentType("application/x-javascript");
Random random = new Random();
String srand="";
for (int i = 0; i < 4; i++) {
String rand = String.valueOf(random.nextInt(10));
// String rand = getRandChar();
srand += rand;
}
String content = "您的验证码为"+srand+"请注意妥善保存!";// 短信内容(必填)
//System.out.println(content);
String sendRes = jsonHttpClient.sendSms(phonenum, content);
JSONObject json = JSONObject.fromObject(sendRes);
String data="1";
if(!"0".equals(json.get("result"))){
data="0";
}
   session.setAttribute("code", srand); //将验证码保存在session中
   response.setContentType("application/json;charset=UTF-8");  
        response.setHeader("Cache-Control", "no-cache");  
        PrintWriter out = response.getWriter();  
        out.write(data);  
   //request.getRequestDispatcher("/forgetpasswd/forgetpasswd2.jsp").forward(request, response);


}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43

验证验证码接口

/**
   * 校验验证码
   * @Title: checkCode
   * @Description: TODO
   * @param @param request
   * @param @param response
   * @param @throws ServletException
   * @param @throws IOException    
   * @return void    
   * @throws
   */
public void checkCode(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException{


String codelast = request.getParameter("codelast");//获取前台传来的用户输入的验证码
Object code=request.getSession().getAttribute("code"); //获取session中的验证码
 String data ="1";
   if(null==code){
    data="2";
   }else if(!code.equals(codelast)){
    data="0";
   }
response.setContentType("application/json;charset=UTF-8");  
        response.setHeader("Cache-Control", "no-cache");  
        PrintWriter out = response.getWriter();  
        out.write(data); 
}


 
  打印本页