한번해보자
61
2017-08-08 11:43:52
12
2835

한페이지에서 AJAX 3개를 호출하는데 오류가 있어서 질문드립니다.


안녕하세요 하다하다 안되서 질문 올려봅니다.

한페이지에서 AJAX 3개를 호출하는데 꼭 한개씩 호출이 안됩니다.

리스트를 선택하면 각각 function에 AJAX를 호출해서 값을 불러오는 식으로 되어있는데

처음 한번은 제대로 호출됩니다 그런데 그후 다른 리스트를 선택하면 꼭 하나씩

그것도 번갈아가면서 됐다가 안됐다 이러네요 

밑에소스처럼 비슷한형태로 3개 사용하고 있습니다.

function getBanwl(mcd){
			var mascode = mcd;
			$("#MCD_WL").val(mascode+"");
			//alert($("#MCD").val());
			var option = {
					   url:"/scb/getBanwl.lmo",
					   //data : {MCD:mascode},
					   type : "post",
					   dataType: "json", 
					   iframe:true,
					   async:false,
					   contentType: "application/json; charset=utf-8",
					   success : function(data) {
						   $("#banwl").html("");
						   if(data.length == 0){
							   $("#banwl").html("해당없음");
						   }else{
							   $.each(data,function (key, field){
								   $("#banwl").append(field.AREA + "" + field.WL+" 센티미터 이하 </br>");
							   });
						   
							   $.each(data,function (key, field){
								   $("#banwl").append(field.BANWL);
							   });
						   }
						   
					   },
					   error: function(request,status,error) {
						   alert("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);
					   }
		};
		
		$("#frm_wl").ajaxSubmit(option);
		return false;
	}


0
0
  • 답변 12

  • ktsedd
    6k
    2017-08-08 11:48:43

    안된다기보단 비동기 문제일거같네요 

    순서가 필요한 요청들이시면

    3개를 동기방식으로 차례대로 실행시키는걸 고민해보세요

    1
  • ktsedd
    6k
    2017-08-08 11:56:15

    어근데  이게있는데도 그런문제가있나여 더봐야겠는데요?

    async:false,
    0
  • ktsedd
    6k
    2017-08-08 11:57:58

    그 3가지 function 에 

    저 옵션 이 false로 되어있는지 확인해보세요

    0
  • 한번해보자
    61
    2017-08-08 12:00:50

    네 전부 async:false로 해뒀습니다

    0
  • ktsedd
    6k
    2017-08-08 12:36:37

    오 그러면 중단점 3군데에 찍어놓고 안타는 시점에 원인 찾아가는수밖에없겠네요

    비동기 문제가 아니라면요

    0
  • 푸르게
    463
    2017-08-08 12:53:27

    jquery when 을 사용해 보세요.


    $.when( $.ajax( "/page1.php" ), $.ajax( "/page2.php" ) ).done(function( a1, a2 ) {
      // a1 and a2 are arguments resolved for the page1 and page2 ajax requests, respectively.
      // Each argument is an array with the following structure: [ data, statusText, jqXHR ]
      var data = a1[ 0 ] + a2[ 0 ]; // a1[ 0 ] = "Whip", a2[ 0 ] = " It"
      if ( /Whip It/.test( data ) ) {
        alert( "We got what we came for!" );
      }
    });



    2
  • shaffron
    2k
    2017-08-08 12:56:34

    제이쿼리 버전에 따라 비동기 지원여부가 다른걸로 압니다.

    1.9인가.. 그 이상이면 async에 false 인자 줘도 비동기로 진행됩니다.

    1
  • ktsedd
    6k
    2017-08-08 12:57:18

    헉... 몰랐던 사실이네요 배워갑니다

    0
  • 한번해보자
    61
    2017-08-08 13:50:02

    답변갑사합니다!

    success에 다음 ajax를 호출하하니 되네요


    1
  • ktsedd
    6k
    2017-08-08 14:00:40 작성 2017-08-08 14:01:28 수정됨

    조금 찾아봤는데요

    ajax async deprecated 이런식으로 더이상 사용하지 않는 방식이라네요

    ajax 안에 ajax 방식도 괜찮긴한데 

    가독성이 좋지않다고 해서 사용되는 방식이 promise 패턴이라고 하네요

    http://programmingsummaries.tistory.com/325

    https://developers.google.com/web/fundamentals/getting-started/primers/promises

    참고해서 공부용으로 적용해봐도 될거같아요

    1
  • shaffron
    2k
    2017-08-08 14:11:24

    ktse // AJAX 란 단어에서 A가  Async인데 동기방식으로 진행하는게 좀 이상하긴 했죠.

    그래서 상위 jQuery버전에서는 삭제했다고 알고있네요.. 저도 이문제로 고생해서 ㅠㅠ.


    프로미스 패턴은 굉장히 많이 쓰고 편리합니다.

    여러개의 비동기 함수를 프로미스로 반환해놓고

    Promise.all[promise1, promise2, ...].then(~~); 해놓으면 모든 비동기 작업이 완료되야 then이 진행되죠.

    개인적으로 요긴하게 잘 쓰고 있습니다.

    ES6에서 내장하고 있기 때문에 별도 라이브러리 필요없습니다.


    2
  • ktsedd
    6k
    2017-08-08 14:13:54

    그렇군요 알찬정보 감사합니다 ㅎㅎ

    0
  • 로그인을 하시면 답변을 등록할 수 있습니다.