本文将详细讲解如何使用jQuery实现发送验证码并60秒倒计时功能。大致的思路是通过点击发送按钮触发AJAX请求，在后台生成随机验证码并发送短信，同时开始倒计时，60秒内禁止再次点击发送按钮。下面将分为以下几个步骤进行讲解：
步骤一：引入jQuery库和相关样式文件
<head>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="path/to/style.css">
</head>
步骤二：HTML结构
<form>
<div class="form-group">
<input type="text" name="tel" placeholder="请输入手机号">
</div>
<div class="form-group">
<input type="number" name="captcha" placeholder="请输入验证码">
<button type="button" class="btn btn-primary" id="send_code">发送验证码</button>
</div>
</form>
步骤三：发送AJAX请求并开始倒计时
// 定义倒计时变量
var second = 60;
$('#send_code').on('click', function() {
// 获取手机号码
var tel = $('input[name="tel"]').val();
// 发送AJAX请求
$.ajax({
type: 'GET',
url: '/api/sendCode', // 发送验证码的后台接口
data: {tel: tel},
success: function(data) {
if (data.status === 'success') {
// 发送成功，开始倒计时
var timer = setInterval(function() {
second--;
$('#send_code').text('重新发送（'+second+'s）');
if (second <= 0) {
clearInterval(timer);
// 倒计时结束后可以再次点击发送按钮
$('#send_code').removeAttr('disabled').text('发送验证码');
}
}, 1000);
// 倒计时开始后禁用发送按钮
$('#send_code').attr('disabled', 'disabled');
} else {
// 发送失败，弹出提示框
alert(data.message);
}
},
error: function(xhr, type, errorThrown) {
// 异常处理
console.log(xhr);
console.log(type);
console.log(errorThrown);
}
});
});
步骤四：后台接口代码示例（PHP）
/**
* 发送验证码
*
* @param string $tel 手机号码
*
* @return bool
*/
function sendCode($tel) {
$code = mt_rand(100000, 999999);
// 发送短信，略...
if ($sendResult === true) {
// 缓存验证码
cache($tel.'_code', $code, 300);
return true;
} else {
return false;
}
}
// 调用发送验证码函数
if (isset($_GET['tel'])) {
if (sendCode($_GET['tel'])) {
echo json_encode(['status' => 'success', 'message' => '验证码已发送']);
exit;
} else {
echo json_encode(['status' => 'error', 'message' => '验证码发送失败，请稍后再试']);
exit;
}
}
以上是一个使用jQuery实现发送验证码并60秒倒计时的完整攻略，如果有需要可以根据实际项目需求进行修改。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery实现发送验证码并60秒倒计时功能 - Python技术站
微信扫一扫 
支付宝扫一扫 