2013-02-26 3 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

Прежде всего; что вы ожидаете? Кажется, результат будет отменен по каждому запросу. –

+0

Я хочу получить результат один за другим. См. 'Usn' меняется в каждом цикле. Я знаю, что это неправильно, и я не знаю, как это сделать правильно. Я хочу объединить каждый результат с finalResult. –

+0

Вы указываете, что ожидаете данные JSON с сервера, но вы не используете возвращенные данные как карту JOSON. Правильно ли это? – sdespont

ответ

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

+0

Я думаю, что вы правы DanC, я просто принял эту проблему, потому что вопрос не задал ее правильно. мой плохой –

+0

Второй идеальный для меня. Спасибо. –

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++; 
    } 
} 
Смежные вопросы