文档章节

ajax防止重复提交的办法

双月通天
 双月通天
发布于 2015/07/31 19:04
字数 1139
阅读 1635
收藏 4

一. 首先说说为什么要防止ajax重复提交,有时候我们会遇到一下几种情况:

         情况1:点击一次按钮就会发送一次ajax请求,用户疯狂的快速点击该按钮,密且快的ajax请求会让我们的服务器压力山大。我们必须采取一定的机制防止。

         情况2:用户点击不那么频繁,但是第一请求的数据量较多,花费的时间较长,第二次请求的数据较少,比第一次请求的数据早回来,先显示在界面上,等到第一次的数据回来之后,再把数据显示,就会覆盖掉第二次的显示的数据,这样让用户体验很不好。

  现在根据个人水平总结了一下几种办法。

 二. 解决ajax重复提交请求的办法

1. 让其点击的按钮disable,让其不能点击

这儿以登录按钮为例

(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);

2  用setTimeout+clearTimeout方法,防止大量重复点击

         相信大家碰到过这样的业务,我们允许它重复点击(或者其他用户事件),但是不允许在一定的时间内超过次数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);
     
 });

这种办法的方法就是当用户疯狂的快速点击的时候,只要时间没有查过100毫秒,就会被取消,只有最后一次会被发送出去。

3 每次发送ajax前,取消之前没有返回的同样的ajax请求,就是abort掉

    其实Ajax请求的XMLHttpRequest对象有abort方法,在发送之前把之前没有返回的ajax请求取消。

abort()函数

取消当前响应,关闭连接并且结束任何未决的网络活动。

这个方法把 XMLHttpRequest 对象重置为 readyState 为 0 的状态,并且取消所有未决的网络活动。例如,如果请求用了太长时间,而且响应不再必要的时候,可以调用这个方法。

伪代码如下:

if(xmlhttp&&xmlhttp.readyState<4)
{
    xmlhttp.abort(); 
}

三 .总结

第1种方法一般用于表单提交数据,防止重复提交,像登陆按钮之类的东西。但不适合与请求资源,用户体验不好

第2种方法是做防止用户疯狂快速点击时产生的大量ajax请求,适合用于请求资源之类的地方使用,但是解决不了情况2的这种情况。

第3中方法适合于也是请求资源,且可以解决就是点击不频繁,且第二个请求比第一个早回来的情况。那为什么请求资源的时候不都用这种办法呢?

原因是由于这种办法虽然都可以解决,但是还是会消耗服务器的资源,而第二种方法在源头就扑灭了发送ajax的请求,所以更好。




© 著作权归作者所有

双月通天
粉丝 40
博文 338
码字总数 316510
作品 0
徐汇
程序员
私信 提问
如何防止重复提交相同的数据?

提交数据的形式是利用ajax提交JSON格式的数据传递给后台程序,现在情况就是,数据库不允许出现商品同名的情况,两台电脑同时提交一样的数据,都能插入成功(偶然会成功),因此在数据库中就出...

wang_liran
2013/11/22
1K
8
防止重复提交

简介 在现在的web开发中我们经常使用ajax从后端获取数据,提交数据。对于有些游戏爱好者或者手速甚快的同学来说,一个按钮触发click事件可以触发多次。有经验的前端开发者肯定会使用防止重复...

java-script
2017/09/18
0
0
谈谈防止重复点击提交

首先说说防止重复点击提交是什么意思。   我们在访问有的网站,输入表单完成以后,单击提交按钮进行提交以后,提交按钮就会变为灰色,用户不能再单击第二次,直到重新加载页面或者跳转。这...

五大三粗
2015/12/26
591
0
Jfinal token拦截器另类实现,防止表单重复提交

由于页面部分使用的div+ajax方式局部刷新,jfinal提供的token拦截器那种刷新页面的方式不太合适,所以想了个办法 还是使用 jfinal 原来的东西 在跳转到view之前,生成token 2.在页面中加入隐藏域...

厌恶自己
2015/07/12
2.5K
1
在Uliweb中防止表单多次提交的实现

防止表单重复提交并不是一个新问题,在这篇文章《[Prevent Duplicate Form Submission][1]》就讲了许多的办法: 禁止提交按钮 Post/Redirect/Get 模式 保存唯一Token值到session中 在数据库中...

limodou
2013/10/24
147
0

没有更多内容

加载失败,请刷新页面

加载更多

15、SpringMVC进行json交互

SpringMVC进行json交互 json数据格式在接口调用中、html页面中较常用,json格式比较简单,解析还比较方便。 请求json、输出json。要求请求的是json串,前端页面中需要将请求的内容转成json,...

快乐的瓶子
26分钟前
6
0
delphi版插apc杀进程驱动源码

从c代码转的,备份一下,里面有硬编码unit MyDriver;{$HINTS OFF}{$WARNINGS OFF}interfaceusesnt_status, ntoskrnl, native, winioctl, fcall, macros;typeTKILL = ...

simpower
30分钟前
3
0
带你上手一款下载超 10 万次的 IDEA 插件

作者 | 倪超(银时) 阿里云开发者工具产品专家 本文整理自 11 月 7 日社群分享,每月 2 场高质量分享,点击加入社群。 导读:Cloud Toolkit 是本地 IDE 插件,帮助开发者更高效地开发、测试...

阿里云官方博客
30分钟前
3
0
GMAT语法7个常考重要考点分析

GMAT语法考点多,并非所有考点都值得重点关注。实际上GMAT语法存在一些高频考点,考生需要优先掌握它们才能更好地保证得分。同时GMAT备考中大家还需要培养连续做题的耐力。下面小编就来做具体...

bole6
35分钟前
3
0
最佳实践 | RDS & POLARDB归档到X-Pack Spark计算

X-Pack Spark服务通过外部计算资源的方式,为Redis、Cassandra、MongoDB、HBase、RDS存储服务提供复杂分析、流式处理及入库、机器学习的能力,从而更好的解决用户数据处理相关场景问题。 RD...

一肥仔
36分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部