2012-04-11 125 views
3

我必須在循環中發出一系列的Ajax請求。其中約100人。並且每個請求都會返回一個JSONP變量。我從JSON中提取數據,並將值附加到div中。問題是我希望div按照函數調用的順序附加數據。即依次。現在我每次刷新頁面都會得到不同的順序,具體取決於請求完成的順序。這是我的代碼。如何使循環中的多個ajax請求按順序返回值?

$.each(elem, function (index, item) { 

      $.ajax({ 
       type: 'post' , 
       url: moviesSearchUrl + '&q=' + encodeURI(item) + '&page_limit=1', 
       dataType: "jsonp", 
       async: false, 
       success: searchCallback 
      }); 

      function searchCallback(data) { 
       var movies = data.movies; 

       var markup = index + ': '+ movies[0].title + '<img class=" bord" src="' + movies[0].posters.thumbnail + '" /><br/>'; 

       $("div.content").append(markup); 
      } 

     }); 
}); 

因爲我顯示索引裏面div的值,每次我得到隨機訂單。 2 4 3 1 7有時和1 5 2 7 4有時。我甚至會嘗試異步:false。這沒有幫助。我在某處讀到JSONP不能用async:false來完成。請幫助我。

回答

4

您可以使用佔位符。

$.each(elem, function (index, item) { 

      var $placeholder = $('<div>').appendTo("div.content"); 

      $.ajax({ 
       type: 'post' , 
       url: moviesSearchUrl + '&q=' + encodeURI(item) + '&page_limit=1', 
       dataType: "jsonp", 
       async: false, 
       success: searchCallback 
      }); 

      function searchCallback(data) { 
       var movies = data.movies; 

       var markup = index + ': '+ movies[0].title + '<img class=" bord" src="' + movies[0].posters.thumbnail + '" /><br/>'; 

       $placeholder.replaceWith(markup); 
      } 

     }); 
}); 
+0

我試過了,現在我只得到第一個值。 Div不會附加其他數據。 – Pradep 2012-04-11 02:07:02

+0

對不起,我的壞。我沒有聲明佔位符變量。它現在順序地說。但我有一個新問題。有些請求會丟失。之後,我得到1-25部電影,我沒有得到巢10的價值,然後我得到了未來10和類似的東西。我認爲API限制可能存在問題。我看着它。謝謝! – Pradep 2012-04-11 02:16:50

+0

讓我知道您是否可以監控流量,我們可能會找到一種方法來限制您的請求。我通常使用firefox的firebug來分析ajax響應。有什麼辦法可以將您請求的內容整合到一次調用API中? – Sinetheta 2012-04-11 02:37:33

2

喜歡的東西:

// iterate over your set 
$.each(myset, function(i,e){ 

    // placeholder div (hidden from view until it's populated) 
    var $placeholder = $('<div>').hide().appendTo('div.content'); 

    // make your ajax call 
    $.getJSON('/link/to/resource','{date:here}',function(d){ 

    // insert the content in to the div and re-show it 
    $placeholder.text(i + ': ' + d.movies[0].title).show(); 
    }); 
}); 
4

不要使用一個for循環。使用遞歸函數:

var i = 1; 

function loadNext(){ 
    if (i < 5){ 
     $.ajax({ 
      type: "GET", 
      url: "results/result_html.php?usn="+i+"&resultType="+resultType, 
      dataType:"JSON", 
      success:function(result){ 
       finalResult+=result; 
       result=result+htmlMessage; 
       $("#info").hide(); 
       $("#result").html(result);    
       $("#usn").attr("placeholder", "Class USN"); 
       loadNext(); 
      } 
     }); 
     i++; 
    } 
}