2013-02-26 114 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++; 
    } 
}