Solution to prevent repeated Ajax requests

This article mainly introduces the solution to prevent repeated sending of Ajax requests. Interested friends can refer to it

There are multiple buttons on the page. Click the button to go to the server asynchronously. Read the data and then display the data on the front end. The page requested by each button click is the same, but the request parameters are different, so the returned content is different. When multiple buttons are clicked continuously, multiple asynchronous requests will be issued. Then according to the speed of the request return (because different button parameters are different and the return content is different, there will be speed), the data will be displayed in sequence, then a button clicked first will appear, because the amount of data he requested is relatively large. , causing the data to be displayed later.

1. Problem Solving

There are two ways to solve this problem:

• 1 .When multiple requests are made continuously and the requested URL addresses are the same. Abandon all previous requests and only execute the last request.

• 2. When multiple requests are made in succession and the requested url addresses are the same. Abandon all subsequent requests and only execute the first request.

2. Solution

1. Set the async of the ajax request to false

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

 } 
});

async

• ##Type: Boolean

• Default value: true. By default, all requests are asynchronous. If you need to send synchronous requests, set this option to false.

• Note that synchronous requests will lock the browser, and other user operations must wait for the request to be completed before they can be executed.

2. Use jquery ajaxPrefilter to interrupt the request

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

• options are the requested options

• originalOptions values ​​are as Provides unmodified options to the Ajax method, therefore, there are no default values ​​in the ajaxSettings settings

• jqXHR is the requested jqXHR object

Limitations: Only prevents jquery ajax requests from the frontend. Does not work for non-jquery ajax requests. Because the ajaxPreFilter function of jquery is used, it only works on jquery ajax requests.

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

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

Ajax transfers JSON example code

ajax uses json to realize data transmission

Spring MVC front-end and back-end 5 ajax interaction methods

The above is the detailed content of Solution to prevent repeated Ajax requests. For more information, please follow other related articles on the PHP Chinese website!