JQuery. demande Ajax pour chaque ligne dans le tableau

Question

j'ai essayé faire la demande Ajax pour chaque ligne dans le tableau, mais je ne peux pas obtenir le résultat souhaité

Tableau:

<table> 
     <tr class="data"> 
      <td class="editable"> 
       <a class="refresh btn btn-large" class="page"> 
        Col one 
       </a> 
      </td> 
      <td class="editable"> 
       <a href="#" data-pk="10" id="query" class="query"> 
        Col two 
       </a> 
      </td> 
     </tr> 
     <tr class="data"> 
      <td class="editable"> 
       <a class="refresh btn btn-large" class="page"> 
        Col one 1 
       </a> 
      </td> 
      <td class="editable"> 
       <a href="#" data-pk="10" id="query" class="query"> 
        Col two 1 
       </a> 
      </td> 
     </tr> 
</table> 

Ajax Demande

$("#detect_rel").click(function(){ 
    $('.data').each(function(i, el) { 
     var query = $(el).children('.editable').children('.query').text(); 
     var page = $(el).children('.editable').children('.page').text(); 

     $.ajax({ 
      url: 'wordstat/ajax?query='+query+'&page='+page, 
      success: function(data){ 
       $(el).children('.editable').children('.relevantnost').html(data) 
      } 
     }); 
    }); 
}); 

Mon problème: Toutes les requêtes ajax sont envoyées en même temps, mais je dois faire une pause entre les demandes.

P.s. A propos de l'attribut « id » dans les balises: je devrais l'utiliser cuz de « Bootstrap X Editor »

Answer 1

Le problème est que Les requêtes AJAX sont asynchrones, donc si vous les faites toutes dans .each(), il n'y aura pas de pause.

Ce dont vous avez besoin est de prendre d'abord chacun des éléments el et de les placer dans un tableau. Ensuite, créez une variable globale qui sera votre compteur pour savoir combien de requêtes ont été envoyées.

Vous envoyez votre première demande, puis envoyez la seconde dans la fonction de succès de la première, et ainsi de suite.

Vous devez réécrire essentiellement, de sorte que les demandes soient envoyées lorsque l'opération est terminée.

Exemple:

function test() 
{ 
    var arr = new Array(); 
    var counter = 0; 

    $('.data').each(function(i, el) { 
     arr.push(el);  
    }); 

    doRequest(counter); 

    function doRequest(counter) 
    { 
     var query = $(arr[counter]).children('.editable').children('.query').text(); 
     var page = $(arr[counter]).children('.editable').children('.page').text(); 

     $.ajax({ 
      url: 'http://www.google.com?'+query+'&page='+page, 
      success: function(data){ 
       alert("made request with query="+ query); 
       counter++; 
       if(counter<arr.length) 
       doRequest(counter); 
      } 
     }); 
    } 

} 

Edit:

Comme je l'ai vu des autres réponses que vous pouvez simplement inclure async: false, ce qui rend la demande asynchrone.

Une approche similaire à ceci est seulement utile pour les situations où async:false est pas pris en charge ou pas préférable en raison de bloquer le navigateur ...

demandes inter-domaines et dataType: demandes « JSONP » ne le font pas support opération synchrone. Notez que les requêtes synchrones peuvent bloquer temporairement le navigateur, en désactivant toutes les actions pendant que la demande est active.

De: http://api.jquery.com/jQuery.ajax/#jQuery-ajax-settings

Answer 2

Il semble que vous avez juste besoin de créer une fermeture autour el:

(function(el) { 
    $.ajax({ 
     url: 'wordstat/ajax?query='+query+'&page='+page, 
     success: function(data){ 
      $(el).children('.editable').children('.relevantnost').html(data) 
     } 
    }); 
})(el); 

Cela va créer une copie distincte de el pour chaque requête, de sorte que chaque réponse mettra à jour son élément correspondant.

(Note:. Si vous voulez vraiment faire une pause entre chaque demande, vous pouvez utiliser l'option async: false de $.ajax, mais je ne vois pas pourquoi vous voulez faire)

Answer 3

Ils les requêtes AJAX sont asynchrones, de façon dès que l'on demande AJAX si décocha, la prochaine each() itération ont lancé ce que vous avez probablement un certain nombre de demandes parallèles à l'AJAX point final. Vous pouvez rendre la requête asynchrone dans la configuration si vous voulez qu'ils bloquent. Cela les ferait fonctionner en série.

 $.ajax({ 
      async: false, 
      url: 'wordstat/ajax?query='+query+'&page='+page, 
      success: function(data){ 
       $(el).children('.editable').children('.relevantnost').html(data) 
      } 
     });