jQuery简单实现**秒后点击效果,防止ajax频繁获取数据

作者: pengpeng 分类: 所有文章 发布时间: 2018-01-05 22:50

自己的分类目录已经写好,一直在更新最新功能,包括投稿,文章资讯,ajax搜索功能等等。
在写文章资讯搜索的时候,防止频繁获取数据被安全狗拦截,使用到了这个小小技术,后来百度一下,发现很多人还是需要这个功能,就想着发出来了。包括短信倒计时发送都可以这样使用。代码都有注释。

效果展示
jQuery简单实现**秒后点击效果,防止ajax频繁获取数据
文件说明

/-- index.html  [主文件,放置ajax等]
/-- math.php    [生成随机数]

index.html

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewPort" content="width=device-width">
<link href="https://cdn.bootcss.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
<hr>
<h4 style="text-align: center;">简单实现**秒后点击效果</h4>
<hr>
<form action="math.php" method="get" class="form-inline" style="display:block;text-align: center;" id="test-form">
<input type="text" name="a" class="form-control">
<input type="submit" value="提交" class="btn btn-success" id="test-form-btn">
</form>
<div class="ajax-box" style="margin-top:15px;text-align: center;">
我是内容区域
</div>
</div>
<script type="text/javascript">
$(document).delegate('#test-form','submit',function(){
// 获取action url
var ajaxUrl		=	$(this).attr('action');
// 获取btn
var ajaxBtn 	=   $("#test-form-btn");
// 储存原本Btn的值
var ajaxBtnVal  =   ajaxBtn.val();
// 获取内容区域
var ajaxBox 	=	$(".ajax-box");
// 设置倒计时时间
var times 	= 5;
// 设置btn为禁止点击
ajaxBtn.attr('disabled',true);
// 开始定时器 倒计时
var d = setInterval(function(){
// 递减秒数
times--;
// 判断如果秒数小于等于0则还原按钮
if(times <= 0){
ajaxBtn.val(ajaxBtnVal).attr('disabled',false);
// 清除定时器
clearInterval(d);
// 不向下执行
return false;
}
ajaxBtn.val("请等待" + times + "秒");
},1000);
// 开始ajax请求数据
$.ajax({
url:ajaxUrl,
success:function(data){
// 设置内容区域的内容
ajaxBox.html(data);
}
});
return false;
});
</script>
</body>
</html>

math.php

<?php
echo rand();
?>

预览地址:点我预览

文件下载:

  jQuery简单实现**秒后点击效果,防止ajax频繁获取数据.zip (1.4 KB, 21 次)

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

16条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注