通过 jQuery AJAX 方法实现异步获取后台验证码,需要先引入jQuery,使用$.post或者$.get方式请求后台。并且在等待的时候前台按钮提示在规定时间内输入验证码,时间过了之后按钮提示“重新发送验证码”。“目标地址”请使用正确的跳转地址,否则ajax请求失败。
使用方法
在HTML中引入jQuery.js
<script src="js/jquery.min.js"></script>
HTML结构
<body>
手机号:<input id="mobile" type="text" name="mobile" value="">
<input id="btnSendCode" type="button" value="发送验证码" onclick="sendMessage()" /><br>
验证码:<input id="code" type="text" name="mobile" value="">
</body>
JavaScript代码
<script>
var timeController; //timer变量,控制时间
var count = 5; //间隔函数,1秒执行
var remainCount;//当前剩余秒数
function sendMessage() {
remainCount = count;
//设置button效果,开始计时
$("#btnSendCode").attr("disabled", "true");
$("#btnSendCode").val("请在" + remainCount + "秒内输入验证码");//加上这一句不会出现延迟,否则倒计时延迟1s
timeController = setInterval("SetRemainTime()", 1000); //启动计时器,1秒执行一次
//向后台发送处理数据
var mobile = document.getElementById("mobile").value;
$.ajax({
type: "POST", //用POST方式传输
url: 'code.php', //目标地址.
dataType: "json", //数据格式:JSON
//data: "dealType=" + dealType +"&uid=" + uid + "&code=" + code,
data: "&a="+mobile,
success: function(json){
document.getElementById("code").value=json.code;
}
});
}
//timer处理函数
function SetRemainTime() {
if (remainCount==0) {
clearInterval(timeController);//停止计时器
$("#btnSendCode").removeAttr("disabled");//启用按钮
$("#btnSendCode").val("重新发送验证码");
}
else {
remainCount--;
$("#btnSendCode").val("请在" + remainCount + "秒内输入验证码");
}
}
</script>
PHP代码
<?php
echo json_encode(array('code'=>mt_rand(1000,9999)));
?>
效果展示