Ajax 여러개(multiple) 한번에 요청시 처리방법

어제부터 시작해서 오늘까지 삽질.

javascript에서 for문 또는 jQuery.each 문을 사용해 루프를 돌려 ajax를 호출하는 도중 값을 제대로 받지 못하는 사태가 발생하였다.

초반 페이지 로딩시 필요한 정보를 한번에 가져오는 방법을 선택해 이렇게 하고있었는데,

ajax 로딩 후 다음 ajax로딩이 서버에서 먼저 처리되는바람에 이전에 로딩된 data는 날아가버리는 현상이었다.

$.ajax({

   ...

   option

   ...

   success: function(data) {

      .... code ....

   }

});

이상태에서 success쪽이 문제가 있는가 하여 complete쪽에 옮겨보기도 하고 별의별 삽질을 다 해봤는데 처리되지 않았다.

검색해보니, jQuery ajax 옵션 중 async가 있는데, 이 값을 false로 설정해야 순차적인 데이터 통신이 가능하다는 것이다.

$.ajax({

   ...

   async : false,

   ...

   success: function(data) {

      .... code ....

   }

});

위와 같이 변경하니 데이터를 받은 후 다음 ajax를 호출하는 방식으로 처리된다.

다행히 하루만에 삽질 끝...ㅜㅠ