2013-02-26 109 views
3

我想在一個循環中執行Ajax來一個一個地讀取數據。我在我的javascript函數中做了這樣的事情。Ajax不能在循環中工作

var resultType = $("input[name='resultType']:checked").val(); 
var finalResult = ""; 
var loadingMessage = "<img src=\"./results/loader.gif\" alt=\"Loading...\"/><br/>This may take several minutes..."; 
var htmlMessage=loadingMessage; 

$("#result").html(htmlMessage); 

for(var i=1;i<5;i++){ 
    $.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"); 
     } 
    }); 
} 

但它沒有像我期望的那樣執行。如果我刪除循環,並直接給予價值,那麼一切都是正確的。我對Ajax並不熟悉。請任何人都可以幫我嗎?

+1

首先的;你能指望什麼?看來現在每個請求都會覆蓋結果。 – 2013-02-26 14:40:10

+0

我想要一個接一個地得到結果。請看'usn'在每個循環中都在變化。我知道這是錯誤的,我不知道如何使它正確。我想將每個結果與finalResult連接起來。 – 2013-02-26 14:45:13

+0

指定您希望來自服務器的JSON數據,但不使用返回的數據作爲JOSON映射。這是對的嗎? – sdespont 2013-02-26 14:47:23

回答

2

您正在處理關閉的常見問題。當你的ajax請求被執行時,計數器「i」已經並且總是處於最後一個值(4)。

您必須爲該計數器創建一個新的範圍,以便它不會發生; 你能做到這一點有兩種方式:

簡單的方法:

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

或正確的方法:

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

關閉問題在哪裏? – DanC 2013-02-26 14:53:01

+0

我認爲你是對的DanC,我只是假設這個問題,因爲問題沒有正確指定它。我的不好 – 2013-02-26 14:55:28

+0

第二個對我來說很完美。謝謝。 – 2013-02-26 15:49:21

2

我沒有看到一個問題,在此代碼關閉。我相信你試圖達到的目標與強制順序加載有關。你目前提議的方式將「並行」發出所有ajax調用。這個問題依賴於ajax調用的異步性質。

如果你想「sequentialize」的要求,那麼你可以做這樣的事情:

var resultType =$("input[name='resultType']:checked").val(); 
var finalResult=""; 
var loadingMessage="<img src=\"./results/loader.gif\" alt=\"Loading...\"/><br/>This may take several minutes..."; 
var htmlMessage=loadingMessage; 
$("#result").html(htmlMessage); 

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