jsp+servlet+ajax实现手机发送验证码以及倒计时

版权声明：欢迎转载评论~哈哈哈哈请标明出处呀 https://blog.csdn.net/legendaryhaha/article/details/81020930

这学期寻思着，做了一下小项目，也算训练自己，如图，是实现手机发送验证码以及，发送后倒计时的界面！

ps:本文参照这位博主的：https://blog.csdn.net/zhengshuoa/article/details/52230282，还有另一个博主，但是我忘记保存了，找

不到了，如有侵权，联系我，立删。

jsp:

<form id="send" class="leavespace" action="">  
//id自己命名，记得在在下面的js里要对应，class添加自己的样式，action这里为空，因为是通过ajax提交表单的
         <input id="phone" name="username" class="username" 
          tabindex="1" placeholder="手机号/如果手机号换了那就gg" accesskey="n" type="text" autocomplete ="off">
         <p class=""></p>
       <br>     
         <input id="password" name="password" class="password"  
          tabindex="2" placeholder="新的密码" accesskey="p" type="password" autocomplete ="off">
           <div class="">
       </div>
        <br>
        <input id="code" type="text" placeholder="验证码输入" class="code" tabindex="3"> 
       <input id="getCode" name="getCode" class="codeButton" type="button" value="发送"  autocomplete ="off"/>
       <br><br><br>
       <input type="button" class="button buttons" id="validate" value="确认" >
       </form>  

ajax:

<script type="text/javascript">
	 
	  $(function(){
	    $("#getCode").removeAttr("disabled");//记得括号里，对应的是id
	    //发送验证码
	    $("#getCode").click(function(){
	    
	        $.ajax({
	        url:"servlet/MessageServlet",//ajax提交表单
	        data:{
	          "phone":$("#phone").val()
	        },
	        type:"post",
	        async:true,
	        dataType:"text",
	        success:function(data){
	           if(data=='true'){
	             alert("验证码已发送");
	             time(this);
	           }else
	              alert("发送失败");
	        },
	        error:function(){
	            alert("error");
	       }
	    });
	    });
	  
	  //验证
	    $("#validate").click(function(){
	     var code=$("#code");
	     if(code.val()==''){
	         alert("验证码不能为空");
	         return;
	     }
	       $.ajax({
	       url:"servlet/CodeServlet",
	       data:{
	        "code":$("#code").val()
	       },
	       type:"post",
	       async:true,
	       dataTyape:"text",
	       success:function(data){
	          if(data=='true'){
	            alert("成功!");
	            window.location.href="./index.jsp";
	           }
	            else{
	               alert("验证码错误");
	               window.location.href="./index.jsp";
	            }
	       },
	       error:function(){
	            alert("发送失败请重新发送");
	            window.location.href="./MyJsp.jsp";
	       }
	    
	  });
	  });
	  });
	  //倒计时
	   var wait=60;
	  function time(obj){
	    if(wait==0){
	      $("#getCode").removeAttr("disabled");
	      $("#getCode").val("重新获取");
	      wait=60;
	    }else{
	        $("#getCode").attr("disabled","true");
	        $("#getCode").val(wait+"s");
	        wait--;
	        setTimeout(function(){//倒计时的方法
	            time(obj);
	        },1000);        //1s
	  }
	    }
	    
	</script> 

MessageServlet:

这里手机发送验证码用的sms平台，相关接口的demo以及api接口 可上网搜索，其他

短信平台也可参照相关demo自行修改。

public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
        String phone=request.getParameter("phone");
        response.setCharacterEncoding("UTF-8");
        //获取验证码
        String code=getCode();
        request.getSession().setAttribute("code", code);
		//发送短信
       sendMsg(phone,code);
        
        response.getWriter().write("true");
        response.flushBuffer();
        }

	private void sendMsg(String phone, String code)throws HTTPException,IOException {
		// 发送短信
		HttpClient client = new HttpClient(); 
		PostMethod post = new PostMethod("http://utf8.sms.webchinese.cn");//发送http请求
		post.addRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=utf-8");
		NameValuePair[] data ={ new NameValuePair("Uid", "这里写你注册的用户名"),
				new NameValuePair("Key", "短信平台提供给的key"),
				new NameValuePair("smsMob",phone),
				new NameValuePair("smsText","验证码："+code)
		};
		post.setRequestBody(data);
		client.executeMethod(post);
		Header[] headers = post.getResponseHeaders();
		int statusCode = post.getStatusCode();
		System.out.println("statusCode:"+statusCode);
		for(Header h:headers){
			 System.out.println("---"+h.toString());
		}
		String result=new String(post.getResponseBodyAsString().getBytes("utf8"));
		System.out.println(result);//打印返回消息状态
		post.releaseConnection();
	}

	private String getCode() {
		// 获取验证码
		Random rand=new Random();
		String code="";
		for(int i=0;i<4;i++){
			code+=rand.nextInt(10);
		}
		System.out.println(code);
		return code;
	}

CodeServlet:

public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
	//ajax请求codeServlet判断验证码后，codeServlet要返回TRUE或FALSE	
		request.setCharacterEncoding("UTF-8");
		String code=request.getParameter("code").trim();
		String codes=(String) request.getSession().getAttribute("code");
		response.setCharacterEncoding("UTF-8");
		if(codes.trim().equals(code)){
			response.getWriter().write("true");
		}else{
			response.getWriter().write("false");
		}
		response.flushBuffer();
	}