谈谈防止重复点击提交<转>

http://www.cnblogs.com/jinguangguo/archive/2013/05/20/3086925.html

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

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

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

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

  1> 定义标志位:

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

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

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

  3> 替换(移除)按钮DOM

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

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

  三、请求频度

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

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

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

 1 var timer = null;
 2
 3 $(input).keyup(function(){
 4
 5     var value = $(this).val();
 6
 7     clearTimeout(timer);
 8
 9     //如果键盘敲击速度太快,小于100毫秒的话就不会向后台发请求,但是最后总会进行一次请求的。
10     timer = setTimeout(function() {
11         //触发请求
12         $.ajax({
13             url: ‘typeahead.do‘,
14             type: ‘get‘,
15             data: value,
16             success: function () {
17                 //显示匹配结果
18                 //......
19             }
20         });
21     },100);
22
23 });

  四、总结

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

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

 1 //全站ajax加载提示
 2 (function ($) {
 3
 4     var str = ‘<div class="ajax-status" style="display: none;">‘
 5             +    ‘<div class="ajax"><img src="‘ + publicPath + ‘img/loading.gif" width="20" height="20" />数据加载中...</div>‘
 6             +‘</div>‘;
 7
 8     var dom = $(str).prependTo(‘body‘);
 9
10     $(document).ajaxStart(function(){
11         dom.stop(true,false).queue(function(){
12             $(this).show().dequeue();
13         });
14     });
15
16     $(document).ajaxStop(function(){
17         dom.queue(function(){
18             $(this).hide().dequeue();
19         });
20     });
21
22 })(jQuery);

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

时间: 2024-09-26 20:09:25

谈谈防止重复点击提交<转>的相关文章

asp.net中如何防止用户重复点击提交按钮

asp.net中如何防止用户重复点击提交按钮 asp.net 中防止因为网速慢等影响交互的问题导致用户可能点击多次提交按钮,从而导致数据库中出现多条重复的记录,经过亲自验证在网上找的方法,找到两个切实可行的方法:第一种方法1.页面前台按钮: <asp:Button ID="btnSumbit" runat="server" Text="提交" onclick="btnSumbit_Click" /> 在后台Page

vue el-form鼠标事件导致页面刷新解决方案;vue 阻止多次点击提交数据通用方法

一.阻止表单自动提交刷新页面:<el-form> <el-form-item :inline="true" @submit.native.prevent> <el-input @keyup.enter.native='submit'></el-input> </el-form-item> </el-form> 注意: 鼠标事件导致页面刷新问题,在el-form上增加 @submit.native.prevent 可

ASP.NET怎么防止多次点击提交按钮重复提交

今天做一个系统,由于服务器有点慢,所以常会被点击两次或三次,提交的数据就是多次了.所以要让按钮点击后,不能再次点击. 对于一个按钮,要让变成恢色的,只要this.disabled=true就可以了,可是在.NET里,添加了ONCLICK后,就无法提交信息了.所以要加上以下代码. <asp:Button ID="btnSub" runat="server" Text="回复" OnClick="btnSub_Click"

【ASP.NET】 【防止连续多次点击提交按钮 导致页面重复提交】

最近做项目遇到了这样的情况: 公司网络比平常慢了不少,在点击保存按钮提交页面后需等待挺长的一段时间,忍不住手贱点多了几次,当提交完成后发现数据库语句执行异常. 两种验证方式: 第1种: aspx页面按钮: <asp:Button ID="btnSumbit" runat="server" Text="提交" onclick="btnSumbit_Click" /> Page_Load 事件: btnSumbit.A

jquery ajax 放在重复点击事件beforeSend方法

防止重复数据在实际项目开发中,提交表单时常常由于网络或者其原因,用户点击提交按钮误认为自己没有操作成功,进而会重复提交按钮操作次数,如果页面前端代码没有做一些相应的处理,通常会导致多条同样的数据插入数据库,导致脏数据的增加.要避免这种现象,在$.ajax请求中的beforeSend方法中把提交按钮禁用掉,等到Ajax请求执行完毕,在恢复按钮的可用状态. 举个例子: // 提交表单数据到后台处理$.ajax({ type: "post", data: studentInfo, conte

按钮重复点击解决方案

防止重复提交,通用的思路,就是当用户点击提交按钮后,在浏览器中用JS将按钮disable掉,从而阻止用户继续点击该按钮,实现防止重复提交的目的.网上防止重复提交的文章已经不少了,为啥我还要写呢,显然我不是吃饱了撑的...最近一个客户,老抱怨每个月总有几条重复的业务数据:但创建该业务数据的页面,我们已经应用了常规的防重复提交技术,为啥还这样呢-- 1. 常规防重复提交 <asp:Button runat="server" ID="btnPostBack1" Te

iOS小技巧--用runtime 解决UIButton 重复点击问题

iOS小技巧–用runtime 解决UIButton 重复点击问题 什么是这个问题 我们的按钮是点击一次响应一次, 即使频繁的点击也不会出问题, 可是某些场景下还偏偏就是会出问题. 通常是如何解决 我们通常会在按钮点击的时候设置这个按钮不可点击. 等待0.xS的延时后,在设置回来; 或者在操作结束的时候设置可以点击. - (IBAction)clickBtn1:(UIbutton *)sender { sender.enabled = NO; doSomething sender.enabled

解决重复点击onClick事件,多次触发问题

在配置文件中加入一下代码,即可解决全局的onClick重复点击.此方法是重写ngClick事件,可以保护多次点击 app.config(['$provide', function ($provide) { $provide.decorator('ngClickDirective',['$delegate','$timeout', function ($delegate,$timeout) { var original = $delegate[0].compile; var delay = 500

iOS小技巧–用runtime 解决UIButton 重复点击问题

什么是这个问题 我们的按钮是点击一次响应一次, 即使频繁的点击也不会出问题, 可是某些场景下还偏偏就是会出问题. 通常是如何解决 我们通常会在按钮点击的时候设置这个按钮不可点击. 等待0.xS的延时后,在设置回来; 或者在操作结束的时候设置可以点击. - (IBAction)clickBtn1:(UIbutton *)sender { sender.enabled = NO; doSomething sender.enabled = YES; } 如果涉及到按钮不同状态不同样式的时候, 用ena