Lösung zur Verhinderung wiederholter Ajax-Anfragen

In diesem Artikel wird hauptsächlich die Lösung vorgestellt, um das wiederholte Senden von Ajax-Anfragen zu verhindern.

Auf der Seite gibt es mehrere Schaltflächen, um die Daten asynchron zu lesen und dann die Daten im Frontend anzeigen. Die bei jedem Klick auf die Schaltfläche angeforderte Seite ist dieselbe, aber die Anforderungsparameter sind unterschiedlich, sodass der zurückgegebene Inhalt unterschiedlich ist. Wenn mehrere Schaltflächen kontinuierlich angeklickt werden, werden mehrere asynchrone Anforderungen ausgegeben. Anschließend werden die Daten entsprechend der Geschwindigkeit der Anforderungsrückgabe (da die Parameter der verschiedenen Schaltflächen unterschiedlich sind und der Inhalt der Rückgabe unterschiedlich ist, ist die Geschwindigkeit unterschiedlich) nacheinander angezeigt. Anschließend wird eine Schaltfläche angezeigt, auf die zuerst geklickt wird, da die Datenmenge unterschiedlich ist Die von ihm angeforderte Datei ist relativ groß, sodass die Daten später angezeigt werden.

1. Problemlösung

Es gibt zwei Möglichkeiten, dieses Problem zu lösen:

• 1 .Wenn mehrere Anfragen fortlaufend gestellt werden und die angeforderten URL-Adressen identisch sind. Geben Sie alle vorherigen Anfragen auf und führen Sie nur die letzte Anfrage aus.

• 2. Wenn mehrere Anfragen fortlaufend gestellt werden und die angeforderte URL-Adresse dieselbe ist. Alle nachfolgenden Anfragen abbrechen und nur die erste Anfrage ausführen.

2. Lösung

1. Async der Ajax-Anfrage auf false setzen

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

 } 
});

asynchron

• Typ: Boolean

• Standardwert: true. Standardmäßig sind alle Anfragen asynchron. Wenn Sie synchrone Anfragen senden müssen, legen Sie diese Option auf „false“ fest.

• Beachten Sie, dass die synchrone Anfrage den Browser sperrt und andere Vorgänge des Benutzers warten müssen, bis die Anfrage abgeschlossen ist, bevor sie ausgeführt werden ausgeführt werden kann.

2. Verwenden Sie jquery ajaxPrefilter, um die Anfrage zu unterbrechen

Da die erste Lösung ist Dieser kurvenbasierte Ansatz zur Rettung des Landes ist tatsächlich nicht in der Lage, die oben genannten Probleme wirklich zu lösen. Daher wird die Verwendung dieser Methode empfohlen.

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

Vorfilter sind Vorfilter, die vor jeder Anfrage gesendet werden und von $.ajax() verarbeitet werden.

• Optionen sind die angeforderten Optionen

• originalOptions-Werte ​​sind als Stellt unveränderte Optionen für die Ajax-Methode bereit, daher sind keine Standardwerte in den ajaxSettings-Einstellungen

• jqXHR erforderlich jqXHR-Objekt

Die Kernidee des oben genannten Inhalts besteht darin, eine Warteschlange zu verwalten. Beim Senden einer Anfrage wird die Anfrage zur Warteschlange hinzugefügt Wenn auf eine Anfrage geantwortet wird, wird sie aus der Warteschlange gelöscht. Dadurch wird sichergestellt, dass immer nur eine einzige Anfrage gleichzeitig gesendet werden kann.

Einschränkungen: Nur das Frontend, um die Ajax-Anfrage von jquery zu verhindern. Es funktioniert nicht für Nicht-JQuery-Ajax-Anfragen. Da die ajaxPreFilter-Funktion von jquery verwendet wird, funktioniert sie nur bei jquery-Ajax-Anfragen.

Nach dem Aufruf von abort führt jquery die Fehlermethode aus und löst die Informationen zur Abbruchausnahme aus. Diese Art von Ausnahme kann mit den folgenden Methoden unterschieden werden.

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

3. Demo

Bei jedem Klick auf die Schaltfläche wird eine Anfrage an das Backend gesendet, nur die Der letzte Klick ist garantiert. Die Anfrage kann erfolgreich sein.

<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>

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Ajax-Übertragung von JSON-Beispielcode

Ajax verwendet JSON, um die Datenübertragung zu realisieren

5 Ajax-Interaktionsmethoden zwischen Spring MVC Front-End und Back-End

Das obige ist der detaillierte Inhalt vonLösung zur Verhinderung wiederholter Ajax-Anfragen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!