谈谈防止重复提交

àì夳堔傛蜴生んèń 2024-02-17 23:01 8阅读 0赞

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

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

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

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

一、表单提交

就以登录表单为例，代码如下：

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

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

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

二、ajax请求

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

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

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

1> 定义标志位：

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

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

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

3> 替换（移除）按钮DOM

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

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

三、请求频度

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

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

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

四、总结

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

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

//全站ajax加载提示
    (function ($) {
    
        var str = '<div class="ajax-status" style="display: none;">'
                +    '<div class="ajax"><img src="' + publicPath + 'img/loading.gif" 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);

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

原文地址：[http://www.cnblogs.com/jinguangguo/archive/2013/05/20/3086925.html][http_www.cnblogs.com_jinguangguo_archive_2013_05_20_3086925.html]

[http_www.cnblogs.com_jinguangguo_archive_2013_05_20_3086925.html]: http://www.cnblogs.com/jinguangguo/archive/2013/05/20/3086925.html