浅谈一下如何避免用户多次点击造成的多次请求

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

还有很多其他的方式进行防止重复点击提交，如

1> 定义标志位：

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

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

   点击触发请求后，卸载点击事件；请求（或者包括请求后具体的业务流程处理）后，重新载入绑定事件。

3> 替换（移除）按钮DOM

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

 

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

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

　　不妨引深来看，它不一定发生在表单的提交事件上，同样可以发生在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请求

 1 (function ($) {
 2     
 3     $('.J-login').click(function () {
 4     
 5         var loginBtn = this;
 6         
 7         //1.先进行表单验证
 8         //......
 9         
10         //2.让提交按钮失效，以实现防止按钮重复点击
11         $(loginBtn).attr('disabled', 'disabled');
12         
13         //3.给用户提供友好状态提示
14         $(loginBtn).text('登录中...');
15         
16         //4.异步提交
17         $.ajax({
18             url: 'login.do',
19             data: $(this).closest('form[name="loginForm"]').serialize(),
20             type: 'post',
21             success: function(msg){
22                 
23                 if (msg === 'ok') {
24                     alert('登录成功！');
25                     
26                     //TODO 其他操作...
27                 } else {
28                     alert('登录失败，请重新登录！');
29                     
30                     //5.让登陆按钮重新有效
31                     $(loginBtn).removeAttr('disabled');
32                 }
33     
34             }
35         });
36         
37     });
38     
39 })(jQuery);

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

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

 1 (function ($) {
 2     
 3     $('.J-login').click(function () {
 4     
 5         var loginBtn = this;
 6         
 7         //1.先进行表单验证
 8         //......
 9         
10         //2.异步提交
11         $.ajax({
12             url: 'login.do',
13             data: $(this).closest('form[name="loginForm"]').serialize(),
14             type: 'post',
15             beforeSend: function () {
16                 //3.让提交按钮失效，以实现防止按钮重复点击
17                 $(loginBtn).attr('disabled', 'disabled');
18                 
19                 //4.给用户提供友好状态提示
20                 $(loginBtn).text('登录中...');
21             },
22             complete: function () {
23                 //5.让登陆按钮重新有效
24                 $(loginBtn).removeAttr('disabled');
25             },
26             success: function(msg){
27                 
28                 if (msg === 'ok') {
29                     alert('登录成功！');
30                     
31                     //TODO 其他操作...
32                 } else {
33                     alert('登录失败，请重新登录！');
34                 }
35     
36             }
37         });
38         
39     });
40     
41 })(jQuery);