JQuery：如何在完成ajax调用后回调每个循环？

How to callback each loop after completion of ajax call.

如何在完成ajax调用后回调每个循环。

Please find my code as follows.

请按以下方式查找我的代码。

Story:

Let us assume I have 3 values X,Y,Z. Firstly, I am taking X value, sending to django views and their using requests module for getting some info and pushing to the div class push_new_info_here, in the next Iteration I have to take Y value. How to do ? please note: Previous ajax call should be succeeded .

我们假设我有3个值X,Y,Z。首先,我正在获取X值,发送到django视图及其使用请求模块以获取一些信息并推送到div类push_new_info_here,在下一次迭代中我必须取Y值。怎么做 ?请注意:以前的ajax调用应该成功。

Final word: I am collecting all the info of (X,Y,Z), then merging using python and pushing to the div class push_new_info_here

最后一句话:我正在收集(X,Y,Z)的所有信息,然后使用python合并并推送到div类push_new_info_here

window.onload = function() {

  $.each(["X","Y","Z"], function( index, value ) {

      $.post('/find/'+value+'/',{},function(data){
          $('.push_new_info_here').empty();
          $('.push_new_info_here').html(data);
      });

  });

};

2 个解决方案

#1

Like this - use .append if you want to see the data or change the timeout to something long enough for the user to see:

像这样 - 如果你想查看数据或将超时更改为足够长的时间以便用户看到,请使用.append:

var arr = ["X","Y","Z"],cnt=0;

function postIt() {
  if (cnt >= arr.length) return; // stop
  $.post('/find/'+arr[cnt]+'/',{},function(data){
      $('.push_new_info_here').empty().html(data); // or .append
      cnt++; 
      postIt(); // or setTimeout(postIt,3000); // give server a breather
  });
}


$(function() {
  postIt();
});

#2

try wrapping the call in a function, then recursing through the array using the AJAX .done method. For example

尝试在函数中包装调用,然后使用AJAX .done方法在数组中递归。例如

window.onload = function() {
  recursiveAjax(["X","Y","Z"])
};

function recursiveAjax(values){
  //basic error testing
  if (typeof values == "undefined" || values.length == 0) return false
  var value = values.pop();
  $.post('/find/'+value+'/',{},function(data){
    $('.push_new_info_here').empty();
    $('.push_new_info_here').html(data);
    recursiveAjax(values)
  });
}'

EDIT: To avoid destroying the array we can send a cloned copy through to the function. For example:

编辑:为了避免破坏数组,我们可以将克隆的副本发送到该函数。例如:

window.onload = function() {
  var tempArray = ["X","Y","Z"]
  recursiveAjax(tempArray.slice())
};

#1