如何在jsp页面,点击按钮发送短信验证码,并且按钮会倒计时,
你搜索一下 阿里大于。比较方便。
一般是后台发送短信验证码,前端jsp页面只需向后台发送请求,计时可以用 js setTimeout方法
ajax调用阿里大鱼的发送短信的代码代码
$(":button.getcode").click(function(){
var reg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
if(!reg.test($("#mobile").val())){
$('#profile .error_mobile').css('display', 'inline');
return false;
}else{
$('#profile .error_mobile').hide();
}
var countdown = 60;
var _this = $(this);
//设置button效果,开始计时
_this.attr("disabled", "true");
_this.val(countdown + "秒后重新获取");
//启动计时器,1秒执行一次
var timer = setInterval(function(){
if (countdown == 0) {
clearInterval(timer);//停止计时器
_this.removeAttr("disabled");//启用按钮
_this.val("重新发送验证码");
}
else {
countdown--;
_this.val(countdown + "秒后重新获取");
}
}, 1000);
$.ajax({
type : 'POST',
url : '<%=path%>/user/sendCaptchas',
dataType : 'json',
data : {'stype':'3','ctype':'1','mobile':$("#mobile").val()},
success : function(data) {
if(data.errorInfo.errorCode==''){
/* alert("短信发送成功"); */
}else{
alert(data.errorInfo.errorCode);
}
}
});
return false;
});
短信部分看你用谁家的接口,在后台调用即可,前台当输入完手机号后,将手机号传递给后台,进行发送短信,可以在成功后返回,在ajax处理函数中
调用setInterval进行倒计时,如果要防止刷新页面后倒计时消失,可以利用cookie进行操作。
准确的说与 jsp,asp,php 页面无关,前台主要动作是html javascript 控制的动作,发短信则可以用jquery发起跨域请求即可调用第三方SMS系统完成发送动作即可。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
<title>Insert title here</title>
</head>
<body>
<input type="text" id="phone"/>
<input type="button" id="btn" value="免费获取验证码" onclick="settime(this),send()" />
<script type="text/javascript">
function send(){
$.ajax({
url:"sendMessage.action",
type:"POST",
data:"phone="+$("#phone").val(),
success:function(msg){
alert("返回了"+msg);
}
});
}
var countdown=60;
function settime(val) {
if (countdown == 0) {
val.removeAttribute("disabled");
val.value="免费获取验证码";
countdown = 60;
} else {
val.setAttribute("disabled", true);
val.value="重新发送(" + countdown + ")";
countdown--;
}
setTimeout(function() {
settime(val) },1000)}
</script>
</body>
</html>
jsp是这样实现的,后台调用第三方的短信发送接口,我觉得是这样的。
点击按钮发送请求到后台代码发送短信,,前端,while循环倒计时就行了