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

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

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

     //如果键盘敲击速度太快,小于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" 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);

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

谈谈防止Ajax重复点击提交的更多相关文章

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

    asp.net中如何防止用户重复点击提交按钮   asp.net 中防止因为网速慢等影响交互的问题导致用户可能点击多次提交按钮,从而导致数据库中出现多条重复的记录,经过亲自验证在网上找的方法,找到两个 ...

  2. 如何解决ajax重复提交的问题

    如下一段代码: 先忽略我没引jquery.js的问题,这是一个案例. 当我们点击提交时,控制台输出两次e,在network里查看,可以看到我们的ajax传输了两次,造成了数据重复提交. 一种解释为bu ...

  3. mvc中ajax.beginform一次提交重复Post两次的问题解决

    在MVC4中使用ajax.beginform来做添加商品到购物车中的提交操作,结果点击提交按钮后,出现两次post,这样导致商品的数量增加了一倍. 原因:@Scripts.Render("~ ...

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

    防止重复数据在实际项目开发中,提交表单时常常由于网络或者其原因,用户点击提交按钮误认为自己没有操作成功,进而会重复提交按钮操作次数,如果页面前端代码没有做一些相应的处理,通常会导致多条同样的数据插入数 ...

  5. 防止ajax重复提交

    在jquery中防止ajax重复提交

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

    PS:实际使用中发现,第①种方法在火狐浏览中有时候有问题.第2种方法,在各个浏览器中都没问题 近做项目遇到了这样的情况: 公司网络比平常慢了不少,在点击保存按钮提交页面后需等待挺长的一段时间,忍不住手 ...

  7. springboot实现防重复提交和防重复点击

    背景 同一条数据被用户点击了多次,导致数据冗余,需要防止弱网络等环境下的重复点击 目标 通过在指定的接口处添加注解,实现根据指定的接口参数来防重复点击 说明 这里的重复点击是指在指定的时间段内多次点击 ...

  8. js 防止重复点击

    1.添加flag 适用于ajax 表单提交,提交之前flag = false , 提及中,true ,提交后false 2.事件重复点击: <script> var throttle = ...

  9. 2016 系统设计第一期 (档案一)jQuery ajax serialize()方法form提交数据

    jQuery ajax serialize()方法form提交数据,有个很奇怪的问题,好像不能取到隐藏控件的值. //点击提交按钮保存数据 $('#btn_submitUser').click(fun ...

随机推荐

  1. 开发EXTMVC框架前需要了解的基础知识整理

    1.组件选择器 目的:了解如何选择Extjs中的组件,就跟学习jquery时一定会先要学习:$()选择器一样. 常用场景:       1.在controller中的control事件中用到      ...

  2. 【转载】Oracle的方案(Schema)和用户(User)的区别

    免责声明:     本文转自网络文章,转载此文章仅为个人收藏,分享知识,如有侵权,请联系博主进行删除.     原文作者:立正_敬礼_喊志哥     原文地址:http://my.oschina.ne ...

  3. 02.XMemcached的使用

        关于XMemcached的介绍或文档请参考:https://code.google.com/p/xmemcached/wiki/User_Guide_zh     关于Memcached的命令 ...

  4. navigationController.navigationBar.titleTextAttributes

    navigationController.navigationBar.titleTextAttributes = [NSDictionary dictionaryWithObject:[UIColor ...

  5. Winform 打印PDF顺序混乱,获取打印队列

    工作中PDF打印顺序混乱着实让我疼痛了好久,其实决绝方法非常简单,但没有想到这个点子的时候确实让我走了很多弯路 这里文章写出来并不是为了炫耀什么,只是觉得发现些好东西就分享出来而已,同时也做个记录,方 ...

  6. android adb: wireless debug

    http://developer.android.com/tools/help/adb.html#wireless

  7. boost 相关

    编译boost: 1.打开Microsoft Visual Studio 2010 -> Visual Studio Tools -> Visual Studio Command Prom ...

  8. 利用Linq + Jquery + Ajax 异步分页的实现

    在Web显示的时候我们经常会遇到分页显示,而网上的分页方法甚多,但都太过于消耗带宽,所以我想到了用Ajax来分页,利用返回的Json来处理返回的数据, 大大简化了带宽的压力. 先说下思路,无非就是异步 ...

  9. 【面试题】Google of Greater China Test for New Grads of 2014总结

    2014年Google中国校园招聘采用在线技术笔试,在Code Jam平台上,14号9点到15号9点开放测试题,帮助大家熟悉环境.这个周末也有够忙的,当时就上去看了一下,把输入文件下了一下,今天才把题 ...

  10. 使用git了解代码编写过程

    在看教程时,有的老师会将代码放到github,如果不想跟着视频一步一步来,那就直接clone整个代码,但整个看着又有点蒙,那就使用版本切换的功能了. 首先 git clone 下载下来 git log ...