今天要实现一个倒计时的功能,比如你忘记密码了,然后你需要先获取一个验证码,然后页面倒计时60秒之内你如果填进去且验证通过的话那么你就可以修改密码了,这是当下许多网站的基本方式。所以首先你提交一个form,网站会给你一个含有验证码的邮件,但是这个倒计时使用js写的,所以你提交form表单之后是不能够刷新页面的,否则倒计时功能便失去了。
在网上看了看说现在如果要想实现不刷新而提交请求,只有两种方式,一种是iframe方式,另一种是ajax方式。我用iframe实现了。
其实就是
<iframe src="about:blank" name="blankFrame" id="blankFrame" style="display: none;"></iframe>
<form method="post" action="/TaoWei/UserForgetPass" target="blankFrame" id="form11">
我把response返回在一个不显示的iframe里面,这样便不刷新了。
再看看我的倒计时功能吧:
<script type="text/javascript">
var wait=60;
function time(o) {
if (wait == 0) {
document.getElementById("validateDiv").style.display="none";
o.removeAttribute("disabled");
o.value="获取验证码";
wait = 60;
} else {
o.setAttribute("disabled", true);
o.value="重新发送(" + wait + ")";
wait--;
setTimeout(function() {
time(o)
},
1000)
}
}
document.getElementById("btn").οnclick=function(){time(this);document.getElementById("validateDiv").style.display="";
document.forms[0].submit();
}
</script>
小心最后一条语句。如果改成onsubmit则不行,我估计是阻塞了。