Ajax가 루프에서 작동하지 않습니다.

Question

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"); 
     } 
    }); 
} 

그러나 예상대로 실행되지 않습니다. for 루프를 제거하고 직접 값을 제공하면 모든 것이 적절합니다. 나는 Ajax에 익숙하지 않다. 누구든지 나를 도울 수 있습니까?

Answer 1

당신은 클로저에 공통적 인 문제를 다루고 있습니다. 귀하의 아약스 요청이 실행될 때까지 카운터 "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);} 

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