Solution pour éviter les requêtes Ajax répétées

Cet article présente principalement la solution pour empêcher l'envoi répété de requêtes Ajax. Les amis intéressés peuvent s'y référer

Il y a plusieurs boutons sur la page. Cliquez sur le bouton pour accéder au serveur de manière asynchrone. puis affichez les données sur le front-end. La page demandée par chaque clic de bouton est la même, mais les paramètres de requête sont différents, donc le contenu renvoyé est différent. Lorsque plusieurs boutons sont cliqués en continu, plusieurs requêtes asynchrones seront émises. Ensuite, en fonction de la vitesse de retour de la demande (parce que les différents paramètres des boutons sont différents et que le contenu du retour est différent, il y aura de la vitesse), les données seront affichées en séquence, puis un bouton cliqué en premier apparaîtra, car la quantité de données il a demandé est relativement volumineux, ce qui entraîne l'affichage des données plus tard.

1. Résolution de problèmes

Il existe deux façons de résoudre ce problème :

• 1. .Lorsque plusieurs demandes sont effectuées en continu et que les adresses URL demandées sont les mêmes. Abandonnez toutes les demandes précédentes et exécutez uniquement la dernière demande.

• 2. Lorsque plusieurs demandes sont effectuées en continu et que l'adresse URL demandée est la même. Abandonnez toutes les requêtes suivantes et exécutez uniquement la première requête.

2. Solution

1. >

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

 } 
});

async

• Type : Booléen

• Valeur par défaut : vrai. Par défaut, toutes les requêtes sont asynchrones. Si vous devez envoyer des requêtes synchrones, définissez cette option sur false.

• Notez que les requêtes synchrones verrouillent le navigateur et que les autres opérations utilisateur doivent attendre que la requête soit terminée avant de pouvoir être exécutées. .

2. Utilisez jquery ajaxPrefilter pour interrompre la requête

 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 sont les options demandées

• valeurs originalesOptions ​​sont comme Fournit des options non modifiées à la méthode Ajax, par conséquent, aucune valeur par défaut dans les paramètres ajaxSettings

• jqXHR est la demande Objet jqXHR

Limitations : est. juste le frontend pour empêcher la requête ajax de jquery. Ne fonctionne pas pour les requêtes ajax non-jquery. Étant donné que la fonction ajaxPreFilter de jquery est utilisée, elle ne fonctionne que sur les requêtes ajax jquery.

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

3. Démo

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

Exemple de code JSON de transfert Ajax

ajax utilise JSON pour réaliser la transmission de données

5 méthodes d'interaction Ajax entre le front-end et le back-end de Spring MVC

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!