[转载]谈谈防止重复点击提交 - 金广国 - 博客园

[转载]谈谈防止重复点击提交 – 金广国 – 博客园.

首先说说防止重复点击提交是什么意思。

  我们在访问有的网站,输入表单完成以后,单击提交按钮进行提交以后,提交按钮就会变为灰色,用户不能再单击第二次,直到重新加载页面或者跳转。这样,可以一定程度上防止用户重复提交导致应用程序上逻辑错误。

  不妨引深来看,它不一定发生在表单的提交事件上,同样可以发生在ajax的异步请求上。有效地在web客户端采用一定机制去防止重复点击提交,将大大减轻服务器端压力。

  那么,我们就不妨从表单提交及ajax的两种不同请求的处理过程中,来试试如何防止重复点击提交。

  一、表单提交

  就以登录表单为例,代码如下:

<form action="login.do" method="post">
    <input type="text" name="username" />
    <input type="password" name="password" />
    <input type="submit" onclick="this.disabled=true; this.value='登录中...'; this.form.submit();" value="登录" />
</form>

  单击登录按钮进行提交以后,提交按钮就会变为灰色,并且给用户一个友好提示(登录中…),用户不能再单击第二次,直到重新加载页面或者跳转。

  可以发现,我们不需要给这个按钮恢复到可以再次登录的状态,仅仅源于页面重新进行了加载或者跳转。

  但是,针对ajax的请求上,我们又该如何处理呢?

  二、ajax请求

(function ($) {

$('.J-login').click(function () {

var loginBtn = this;

//1.先进行表单验证
//......

//2.让提交按钮失效,以实现防止按钮重复点击
$(loginBtn).attr('disabled', 'disabled');

//3.给用户提供友好状态提示
$(loginBtn).text('登录中...');

//4.异步提交
$.ajax({
url: 'login.do',
data: $(this).closest('form[name="loginForm"]').serialize(),
type: 'post',
success: function(msg){

if (msg === 'ok') {
alert('登录成功!');

//TODO 其他操作...
} else {
alert('登录失败,请重新登录!');

//5.让登陆按钮重新有效
$(loginBtn).removeAttr('disabled');
}

}
});

});

})(jQuery);

  可以发现,当登录失败后,需要重新让登录按钮具有登录事件。

当然,我们可以用一个更加优雅的方式来代替之。

(function ($) {

$('.J-login').click(function () {

var loginBtn = this;

//1.先进行表单验证
//......

//2.异步提交
$.ajax({
url: 'login.do',
data: $(this).closest('form[name="loginForm"]').serialize(),
type: 'post',
beforeSend: function () {
//3.让提交按钮失效,以实现防止按钮重复点击
$(loginBtn).attr('disabled', 'disabled');

//4.给用户提供友好状态提示
$(loginBtn).text('登录中...');
},
complete: function () {
//5.让登陆按钮重新有效
$(loginBtn).removeAttr('disabled');
},
success: function(msg){

if (msg === 'ok') {
alert('登录成功!');

//TODO 其他操作...
} else {
alert('登录失败,请重新登录!');
}

}
});

});

})(jQuery);

在这里,我仅仅举了一个最为简单的例子,还有很多其他的方式进行防止重复点击提交,如

1> 定义标志位:

点击触发请求后,标志位为false量;请求(或者包括请求后具体的业务流程处理)后,标志位为true量。通过标志位来判断用户点击是否具备应有的响应。

2> 卸载及重载绑定事件:

点击触发请求后,卸载点击事件;请求(或者包括请求后具体的业务流程处理)后,重新载入绑定事件。

3> 替换按钮DOM

点击触发请求后,将按钮DOM对象替换掉,自然而然此时不在具备点击事件;请求(或者包括请求后具体的业务流程处理)后,给新的按钮DOM定义点击事件。

当然,还有其他的方式进行实现,欢迎各位博友补充。

三、请求频度

相信大家碰到过这样的业务,我们允许它重复点击(或者其他用户事件),但是不允许在一定的时间内超过次数XX次。这从用户友好体验及服务器承受压力选取了一个折中方案。

最合适不过的例子,莫过于关键字搜索匹配了。

相信大家定然首先想到节流函数了。

var timer = null;

$(input).keyup(function(){

var value = $(this).val();

clearTimeout(time);

//如果键盘敲击速度太快,小于100毫秒的话就不会向后台发请求,但是最后总会进行一次请求的。
timer = setTimeout(function() {
//触发请求
$.ajax({
url: 'typeahead.do',
type: 'get',
data: value,
success: function () {
//显示匹配结果
//......
}
});
},100);

});

 四、总结

从宏观意义上来讲,我们需要对每一个按钮去做”防止重复点击提交“,面对这种情况,我们便可以采用一定策略来对其进行封装实现(如定义通用按钮类绑定事件)。

从具体情况上来讲,我们并不需要对每一个按钮都去做”防止重复点击提交“,仅仅需要对某些可能具有复杂后台业务逻辑、或者文件上传、或者调用其 他非本工程接口导致网络延迟等等情况需要去做”防止重复点击提交“。与此同时,我们必须要给予用户友好提示(如文本提示、渲染loading条、显示文件 上传进度条等等)。两者需要一起来看、一起来做。当然,我们可以单独提取状态显示这个实现逻辑。代码如下——

//全站ajax加载提示
(function ($) {

var str = '
<div class="ajax-status" style="display: none;">'
+ '
<div class="ajax"><img src="' + publicPath + 'img/loading.gif" alt="" width="20" height="20" />数据加载中...</div>
'
+'

</div>
';

var dom = $(str).prependTo('body');

$(document).ajaxStart(function(){
dom.stop(true,false).queue(function(){
$(this).show().dequeue();
});
});

$(document).ajaxStop(function(){
dom.queue(function(){
$(this).hide().dequeue();
});
});

})(jQuery);

总之,”防止重复点击提交“的应用场景及实现方式有很多,需要根据具体项目情况具体来定。

赞(0) 打赏
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏