关于防止用户快速点击按钮,多次发送请求问题
0
悬赏园豆：10
[已解决问题]
解决于 2017-08-28 09:13
问题: 用户多次点击按钮,会发送多多个请求给后台,怎么样做只让一个请求发送过去;
我网上看了很多文章,不知什么样的bug少一点,有的根本看不懂,我简单做了一个demo,采用禁用按钮的方法;
点击后让按钮disabled,文字变为加载中;请求成功后移除disabled属性,恢复文字;这个逻辑有问题吗?我感觉考虑的不全,比如请求error时的处理,请求stop时的处理,是不是都要让按钮状态恢复一下?求指点
<button id="button">Click !</button>
<script type="text/javascript">
$("#button").on("click", function(){
$(this).attr("disabled",true);
$(this).html("加载中...")
$.ajax({
url:"./fastClick.php",
success: function(res){
console.log(res);
$("#button").html("Click !")
$("#button").removeAttr("disabled");
}
})
})
</script>
最佳答案
0
$(function () { $.ajax({ url: 'http://www.baidu.com' }).always(function () { console.log('always'); }); });
可以在always中处理这类事情
收获园豆：10
对于防止用户多次点击的方法,请问有什么建议吗,或者推荐的方法?
@_只影向谁去:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function () {
var $btnSend = $('#btnSend');
$btnSend.click(function () {
$btnSend.attr('disabled', 'disabled');
$.ajax({
url: 'http://www.baidu.com'
}).always(function () {
//模拟请求延时
setTimeout(function () {
$btnSend.removeAttr('disabled');
}, 1000 * 2);
});
});
});
</script>
</head>
<body>
<button id="btnSend">发送请求</button>
</body>
</html>
因为always始终会执行，所以说在always中恢复按钮的状态，就不用分别在error或者success里面来恢复。
其他回答(1)
0
楼上已经告诉你了啊
