SSM发送手机验证码——以网建SMS为例

---

后台源码链接： 点我自取

到网建申请一个帐号，好像可以免费用10条短信

设置用户名、密钥，在发送的时候需要携带该信息

前端代码简化后如下，提交表单我用的是ajax，如果直接提交表单记得name属性值要和后台的@RequestParam(“tel”)中的tel属性值一样，后台代码顶部链接自取。

<form role='form' class='login' id='getPswForm'>			 
  <input type='text' name='tel' placeholder='输入手机号码...'class='form-control' id='getTel' />
  <input type='text' name='psw' placeholder='输入新密码...'class='form-control' id='get-psw' />
   <input type='text' name='code' placeholder='输入验证码...'class='form-control' id='code' style='width: 340px;'/>
  <button id='send' class='btn btn-primary mybtn'>点击发送</button>
  </form>

//发送验证码
	$("#send").click(function(){
		var tel = $("#getTel").val();
		if(checkTel("#get-chk-tel",tel)){
			//alert($("#getTel").val());
			$.ajax({
			//这里的url和type和后台的 @RequestMapping(value="send",method=RequestMethod.POST)保持一致
			  type:"POST",
			  data:{tel:$("#getTel").val()},
			  async:false,
			  url:"send",
			  success:function(result){
				 // alert(result);
				  console.log(typeof(result));
				  if(result=="200"){
					  alert("发送成功，注意查收");
					  $("#get-chk-tel").html("");
					  checkCode(60);
				  }else if(result=="2"){
					  $("#get-chk-tel").html("该用户不存在");
					  checkCode(2);
				  }
			  },
			  error:function(xhr,result){
				  alert(result);
			  }
			});
		}else{
			alert("请填写好手机号码");
		}
	});
	function checkCode(time){
	if(time == 0){
		$('#send').removeAttr("disabled");//这个表示，从xx中移除yy属性，$(xx).remove()，移除xx元素
		$('#send').html("重新发送");
	}else{
		time--;
		$('#send').attr("disabled",true);
		$('#send').html("倒计时"+time+"s");
		setTimeout(function(){
		   checkCode(time);
		},1000);
	  }
  }

效果如下：