$('#getyzm').click(function(){
$.ajax({
url:'/zh/yzm/',
type:'POST',
data:{'phone':$('#join_id').val()},
success:function(reat){
if (reat==1){
alert('发送成功');
$.cookie('yzm', 60, { expires: 1 }); #发送成功后,向用户设置cookie 防止刷新
timekeeping(); #使函数运行
}else{
alert('验证码发送失败')
}
}
})
})
下面是关于倒计时页面
1 $(function(){ 2 if($.cookie('yzm')){ #从cookie中取值,查看验证码是否已经发送 3 timekeeping(); #若发送,则运行此函数 4 } 5 else{ 6 $('#getyzm').attr("disabled", false) #若未发送,设置取消验证码按钮禁用 7 } 8 function timekeeping(){ # 函数运行 9 $('#getyzm').attr("disabled", true); #设置验证码按钮禁用 10 var hs=setInterval(function (){ #定义一个函数 每秒运行一次 从cookie中读值。 11 sj=$.cookie("yzm"); 12 sj=sj-1; 13 $("#getyzm").val(sj+'秒后重发'); #倒计时显示 14 if(sj==0){ #若时间到了 15 $('#getyzm').attr("disabled", false); #设置取消验证码按钮禁用 16 clearInterval(hs); #停止函数,使其不再一秒运行一次 17 sj=$.cookie("yzm",sj, { expires: -1 }); #删除cookie 18 $('#getyzm').val("获取验证码"); 19 }else{ #若时间未到,将值写入cookie中 20 $.cookie('yzm', sj, { expires: 1 }); 21 } 22 },1000); 23 }
}
需引入jQuery.cookie.js
<input type='button' disabled='disabled' id='getyzm' value='获取验证码'>