防止重复发送Ajax请求的解决方案

2024-10-08 20:20:24

在页面中有多个按钮，点击该按钮可以异步的去服务端读取数据，然后在前端将数据展示出来。每个按钮点击请求的页面都是同一个，但是请求的参数不同，所以返回的内容就不同。在连续点击多个按钮的时候就会发出多个异步请求。那么根据请求返回的快慢(因为不同按钮参数不同，返回内容不同，所以会有快慢之分），数据会依次的展示出来，那么就会出现一个先点击的按钮，由于他请求的数据量比较大，导致数据被后显示出来。

一、问题解决

解决这种问题有两种方式：

1.当连续进行多个请求，并且请求的url地址相同时。放弃前面的所有请求，只执行最后一次请求。
2.当连续进行多个请求，并且请求的url地址相同时。放弃后面的所有请求，只执行第一次请求。

二、解决方案

1、将ajax请求的async设置为false

$.ajax({
 async: false,
 type : "POST",
 url : defaultPostData.url,
 dataType : 'json',
 success : function(data) { 

 }
});

async

类型：Boolean
默认值: true。默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。
注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。

2、利用jquery ajaxPrefilter中断请求

由于第一种方案只是一种曲线救国的方式，其实没能真正的解决上面的问题。所以，建议使用这种方式。

 var pendingRequests = {};
 $.ajaxPrefilter(function( options, originalOptions, jqXHR ) {
  var key = options.url;
  console.log(key);
  if (!pendingRequests[key]) {
   pendingRequests[key] = jqXHR;
  }else{
   //jqXHR.abort(); //放弃后触发的提交
   pendingRequests[key].abort(); // 放弃先触发的提交
  }

  var complete = options.complete;
  options.complete = function(jqXHR, textStatus) {
   pendingRequests[key] = null;
   if ($.isFunction(complete)) {
   complete.apply(this, arguments);
   }
  };
 });

Prefilters是一个预过滤器，在每个请求之前被发送和$.ajax()处理它们前处理。

options 是请求的选项
originalOptions 值作为提供给Ajax方法未经修改的选项，因此，没有ajaxSettings设置中的默认值
jqXHR 是请求的jqXHR对象

以上内容的核心思想是维护一个队列，发送请求时，将请求加入队列，请求响应后，从队列中清除，这就保证了在任一时刻只能有一个同样的请求发送.

局限性：仅仅是前台防止jquery的ajax请求。对于非jquery的ajax请求，不起作用。因为使用的是jquery的ajaxPreFilter函数，仅仅对jquery的ajax请求有作用。

调用abort后jquery会执行error的方法，抛出abort的异常信息。可以使用以下方式区分出该类型的异常。

var ajax = $.ajax({
 'error':function(jqXHR, textStatus, errorThrown){
  if(errorThrown != 'abort'){
   //ajax被调用abort后执行的方法
   alert('您的ajax方法被停止了');
  }
 }
})

三、Demo

按钮每次点击都会向后端发送请求，下面的demo实现了多次点击按钮之后，只保证最后一次点击的请求能够成功。

<button id="button1">button1</button>
<button id="button2">button2</button>
<button id="button3">button3</button>
<script>
  var pendingRequests = {};
  jQuery.ajaxPrefilter(function( options, originalOptions, jqXHR ) {
   var key = options.url;
   console.log(key);
   if (!pendingRequests[key]) {
    pendingRequests[key] = jqXHR;
   }else{
    //jqXHR.abort(); //放弃后触发的提交
    pendingRequests[key].abort(); // 放弃先触发的提交
   }

   var complete = options.complete;
   options.complete = function(jqXHR, textStatus) {
    pendingRequests[key] = null;
    if (jQuery.isFunction(complete)) {
    complete.apply(this, arguments);
    }
   };
  });
  <!-- 异步加载应用列表开始 -->

  $("#button1").live("click", function() {
    $.ajax('config/ajax/appinfoListFetcher.json', {
    type:'POST',
    data: {param1:value1,
       param2:value2,
      },
    success: function(res){
      //后端数据回写到页面中
    },
    error:function(jqXHR, textStatus, errorThrown){
     if(errorThrown != 'abort'){
      //ajax被调用abort后执行的方法
      alert('应用加载失败！');
     }
    }
    });
    <!-- 异步加载应用列表结束 -->
   });
</script>

以上就是解决重复发送Ajax请求的方案，希望对大家的学习有所帮助。

防止ajax重复请求的方法(GET和POST)

复制代码代码如下: /* 防止ajax重复请求的GET和POST方法 */ jQuery.extend({ getx:function(url,data,callback,sender){ var params={url:url,data:null,callback:null,sender:null}; for(var i=1;i<arguments.length;i++){ if(arguments[i]!=null){ var ptype=typeof(arguments[i]); if(
Ajax局部更新导致JS事件重复触发问题的解决方法

如果在页面中包含一个ajax更新的列表,那么需要小心非动态更新部分的事件处理. 以带有公共工具栏的列表界面为例: | Menu1 | Menu2 ---------------------------------------------------------------------------- ID TITLE DESCRIPTION OPERATION 1 test1 hey test X - ... 2 test2 why not X - ... --------------------
JS Ajax请求如何防止重复提交

好长时间没写js代码了刚好遇到这样的问题.我们系统多数表单没有做防止重复提交的. 由于不想在后端这边处理,因为假如由后端处理的话,就需要在页面加载的时候给出一次性的token值,加大了开发的工作量不说,还容易忘记做这个,同时,ajax也不好处理,需要提交失败的话同时返回新的token值. 所以我想在,js这边动手.其实以前和前端提过,久久不见动静,就只好弄块砖丢出去了.思路是,覆盖掉$.ajax,在这里面处理掉防止重复提交的问题,而前端的业务开发不受影响,不改代码,无感知. 我想架构的目的之一,
AJAX避免用户重复提交请求实现方案

在使用AJAX(jQuery)异步请求数据时,为了避免因某些原因用户同时多次点击按钮,提交重复的请求,我们需要禁用请求提交按钮. 重点:jQuery的 attr 和 removeAttr 两个函数,主要是元素button的disabled属性. Demo: 复制代码代码如下: <body> <a class="disabled">Button disabeld</a> <a class="abled">Butt
Ajax校验是否重复的实现代码

直接贴代码! 一.controller层: @ResponseBody @RequestMapping("entityFindByCode") public String entityFindByCode(Entity bean, HttpSession httpSession, Model m,HttpServletResponse res) throws IOException{ res.setContentType("text/plain; charset=UTF-8&
jQuery的 $.ajax防止重复提交的两种方法(推荐)

下面给大家带来两种关于jquery 的ajax防止重复提交的解决方法,具体介绍如下所示: 1.第一种,对于onclick事件触发的的ajax 可以采用如下方法: 即在beforeSend中使点击按钮不可用,ajax结果返回后置为可用 $.ajax( { type: 'POST', url: APP+'?m=Shopping&a=ajaxSubmitorder&sid='+sid+'&src='+src, cache:false, dataType: 'json', data: {'
jQuery validate插件实现ajax验证重复的2种方法

本文实例讲述了jQuery validate插件实现ajax验证重复的2种方法.分享给大家供大家参考,具体如下: jquery validate 经过这种多年的改良,已经很完善了.它能满足80%的验证需要,如果validate自带的功能,不能满足我们需求,它提供了addMethod来扩展功能.下面就举个小例子来说明一下addMethod的用法. 完整demo实例代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//
防止重复发送Ajax请求的解决方案

在页面中有多个按钮,点击该按钮可以异步的去服务端读取数据,然后在前端将数据展示出来. 每个按钮点击请求的页面都是同一个,但是请求的参数不同,所以返回的内容就不同. 在连续点击多个按钮的时候就会发出多个异步请求.那么根据请求返回的快慢(因为不同按钮参数不同,返回内容不同,所以会有快慢之分),数据会依次的展示出来,那么就会出现一个先点击的按钮,由于他请求的数据量比较大,导致数据被后显示出来. 一.问题解决解决这种问题有两种方式: 1.当连续进行多个请求,并且请求的url地址相同时.放弃前面的所有请
防止重复发送 Ajax 请求

要考虑并理解 success, complete, error, timeout 这些事件的区别,并注册正确的事件,一旦失误,功能将不再可用: 不可避免地比普通流程要要多注册一个 complete 事件: 恢复状态的代码很容易和不相干的代码混合在一起: 推荐用主动查询状态的方式(A.B,jQuery 为例)或工具函数的方式(C.D)来去除重复操作,并提供一些例子作为参考: A. 独占型提交只允许同时存在一次提交操作,并且直到本次提交完成才能进行下一次提交. module.submit = fu
Vue发送ajax请求方法介绍

一.vue-resource 1.简介一款vue插件,用于处理ajax请求,vue1.x时广泛应用,现不被维护. 2.使用流程 step1:安装 [命令行输入] npm install vue-resource --save step2:引入 [main.js] // 引入vue-resource import VueResource from 'vue-resource' // 使用vue-resource Vue.use(VueResource) step3:编码 [格式:] this.$
详解JavaScript for循环中发送AJAX请求问题

首先说,出现这个问题的场景是很少见的,因为有太多更好解决方法.今天搞ajax的时候,一个有趣的地方,,每个迭代中都要发送一个get请求,因为迭代的速度太快,一个请求还没有完成就进行下一个迭代,在chrome和ff上,除最后一个请求外,其它请求都被取消了.所以该怎么办呢?设置延时(不太好)还是其他办法? 办法有很多,比如设置休眠,迭代等等, 我采用的是另外两种解决办法. 一.同步的ajax请求,而ajax请求默认是异步的,所以要设置为false. function creatXMLHttpRe
如何实现ajax延时发送在空闲之后去发送ajax请求

很多时候,我们都会遇到例如关键字搜索的功能我们第一的想法,肯定是绑定响应的keyup事件,然后将得到的keyword,请求一个ajax返回响应的数据处理但是,这个时候,如果简单绑定keyup事件.那么,每一次的敲击键盘操作都会发送一个ajax请求,这显然不是我们希望的. 我们希望,尽量在空闲之后去发送ajax请求: 因此,我们设定用户在不敲击键盘之后1S,才去发送这个ajax请求复制代码代码如下: var timeout; onkeyup = function() { clearTime
Javascript发送AJAX请求实例代码

一个对AJAX的封装 //url就是请求的地址 //successFunc就是一个请求返回成功之后的一个function,有一个参数,参数就是服务器返回的报文体 function ajax(url,successFunc) { var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); xhr.open("POST",url,true); xhr.onr
vue发送ajax请求详解

vue本身不支持发送AJAX请求,需要使用vue-resource(vue1.0版本).axios(vue2.0版本)等插件实现 axios是一个基于Promise的HTTP请求客户端,用来发送请求,也是vue2.0官方推荐的,同时不再对vue-resource进行更新和维护本文为大家介绍vue使用axios发送AJAX请求首页安装并引入axios 1.npm install axios -S #直接下载axios组件,下载完毕后axios.js就存放在node_modules
在Web关闭页面时发送Ajax请求的实现方法

前言有时候我们需要在用户离开页面的时候,做一些上报来记录用户行为.又或者是发送服务器ajax请求,通知服务器用户已经离开,比如直播间内的退房操作. 本文主要分两部分来讲解怎么完成退出行为的上报. 1.事件监听浏览器有两个事件可以用来监听页面关闭,beforeunload和unload. beforeunload是在文档和资源将要关闭的时候调用的, 这时候文档还是可见的,并且在这个关闭的事件还是可以取消的.比如下面这种写法就会让用户导致在刷新或者关闭页面时候,有个弹窗提醒用户是否关闭. win
JQuery发送ajax请求时中文乱码问题解决

这篇文章主要介绍了JQuery发送ajax请求时中文乱码问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下先排除项目故障: 1.web.xml中是否配置了字符拦截器 <filter> <filter-name>encodingFilter</filter-name> <filter-class>org.springframework.web.filter.CharacterEncodingFilter
ie发送ajax请求返回上一次结果的解决方法

问题出现原因: 1. ie下面只会建立一次 ajax 请求,将响应结果放在浏览器缓存里下次调用该ajax请求时从缓存里读取 get方式时,获取数据,因发送参数和地址都一致,故IE浏览器会从缓存中取,而不会去请求服务器端,而post方式因为参数的不同,不会产生这个问题 2. 火狐下面每次激活事件都会重新建立一次ajax请求解决方法: 1: 在AJAX请求的页面后加个随机函数,我们可以使用随机时间函数在javascript发送的URL后加上t=Math.random() 例如这样:URL

防止重复发送Ajax请求的解决方案

相关推荐

随机推荐