使用Ajax发送手机验证码-优快云博客

本文链接：https://blog.youkuaiyun.com/zhengjunlove/article/details/72528670

1.通过ajax手机验证码发送实例

2.为了方便用了jquery需要测试时请先导入jquery包

html部分代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="jquery.js" type="text/javascript"></script>
</head>
<body>
	
手机号码：<input type="text" name="phone" id="phone">
<input id="btnSendCode" type="button" value="发送验证码" onclick="sendMessage()" />
<p id='timeshort'></p>

</body>

<script type="text/javascript">
	/*-------------------------------------------*/
	var after ='';
	var InterValObj; //timer变量，控制时间
	var count = 60; //间隔函数，1秒执行
	var curCount = 60;//当前剩余秒数	
	var exp =new Date();
	var time;
	time = exp.getTime();
	
	
		
		//获取cookie值
		function getCookie(name){
			var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
			if(arr=document.cookie.match(reg))
			return unescape(arr[2]);
			else
			return null;
		}

		//这是有设定过期时间的使用示例： 
			//s20是代表20秒 
			//h是指小时，如12小时则是：h12 
			//d是天数，30天则：d30 	
		//设置cookie
		function setCookie(name,value,time){ 
			    var strsec = getsec(time); 
			    var exp = new Date(); 
			    exp.setTime(exp.getTime() + strsec*1); 
			    document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString(); 
			} 
			function getsec(str){ 
			   // alert(str); 
			   var str1=str.substring(1,str.length)*1; 
			   var str2=str.substring(0,1); 
			   if (str2=="s")
			   { 
			        return str1*1000; 
			   }
			   else if (str2=="h")
			   { 
			       return str1*60*60*1000; 
			   }
			   else if (str2=="d")
			   { 
			       return str1*24*60*60*1000; 
			   } 
			} 
					
			function sendMessage() {
				if(getCookie('after')>time &&  document.cookie.indexOf('after=') != -1){
					$('#timeshort').html('请不要在60秒内重复获取验证码');	
				}else{
					$('#timeshort').html('');
				}
				trySend();//调用一次		
			 }
			function trySend() {
			 if(getCookie('after')<time || document.cookie.indexOf('after=') == -1 || getCookie('after')==null){
			 	//测试时先注释掉ajax请求代码，否则会不成
			 	 $.ajax({
                        url: "你要请求的路径",
                        type: "get",
                        dataType: "json",
                        data: {'需要传的参数'},
                        success: function (data) {
                            if (data.code == 0) {
                                alert('发送成功');
                            } else {
                                alert(data.msg);
                            }
                        },
                        error: function () {

                        }
                    });

				setCookie("after",time+60*1000,"s60");
				setCookie("phone",$('#phone').val(),"s60");
				curCount = count;
				//设置button效果，开始计时
				$("#btnSendCode").attr("disabled", "true");
				$("#btnSendCode").val(curCount + "秒后重新获取");
				InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器，1秒执行一次
			}
		}	
	//timer处理函数
	function SetRemainTime() {		
		if (curCount == 0) {               
		window.clearInterval(InterValObj);//停止计时器
		$("#btnSendCode").removeAttr("disabled");//启用按钮
		$("#btnSendCode").val("重新发送验证码");
		// code = ""; //清除验证码。如果不清除，过时间后，输入收到的验证码依然有效   
	} else {
		curCount--;
		$("#btnSendCode").val(curCount + "秒后重新获取");
		}
	}
	</script>

</body>
</html>