모든 Ajax 콜이 완료되었는지 확인하는 방법

모든 Ajax 콜이 완료되었는지 확인하는 방법

행이 있는 테이블 스타일 페이지가 있습니다.각 행에는 확인란이 있습니다.all/many 체크박스를 선택하고 "submit"을 클릭하면 각 행에 대해 Jquery ajax 호출이 실행됩니다.

기본적으로 각 행에 대한 폼이 있으며 선택한 모든 행에 대해 반복하여 jquery ajax 호출을 수행하는 폼을 전송합니다.

다음 작업을 수행할 수 있는 버튼이 있습니다.

       $("input:checked").parent("form").submit();

각 행에는 다음이 있습니다.

            <form name="MyForm<%=i%>" action="javascript:processRow(<%=i%>)" method="post" style="margin:0px;">
                <input type="checkbox" name="X" value="XChecked"/>
                <input type="hidden" id="XNumber<%=i%>" name="X<%=i%>" value="<%=XNumber%>"/>
                <input type="hidden" id="XId<%=i%>" name="XId<%=i%>" value="<%=XNumber%>"/>
                <input type="hidden" id="XAmt<%=i%>" name="XAmt<%=i%>" value="<%=XAmount%>"/>
                <input type="hidden" name="X" value="rXChecked"/>
            </form>

이 양식은 processRow에 제출됩니다.

   function processRow(rowNum)
   {
        var Amount = $('#XAmt'+rowNum).val();
        var XId = $('#XId'+rowNum).val();
        var XNum = $('#OrderNumber'+rowNum).val();
        var queryString = "xAmt=" + "1.00" + "&xNumber=" + OrdNum + "&xId=" + xId;


        $('#coda_'+rowNum).removeClass("loader");
        $('#coda_'+rowNum).addClass("loading");


        $.ajax({
          url: "x.asp",
          cache: false,
          type:  "POST",
          data:  queryString,
          success: function(html){
            $('#result_'+rowNum).empty().append(html);
            $('#coda_'+rowNum).removeClass("loading");
            $('#coda_'+rowNum).addClass("loader");
          }
        });
   }

제가 알고 싶은 것은, 이것으로 모든 Ajax 콜이 완료되었는지 알 수 있는 방법이 있다는 것입니다.이러한 모든 콜이 발생하고 있는 동안, 송신 버튼을 유효/비활성화하고 싶은 이유.

어플리케이션의 기밀성 때문에 변수명을 엉망으로 만들었기 때문에 중복되는 경우가 많았습니다.

쉬운 방법

가장 쉬운 방법은 이벤트핸들러를 사용하는 것입니다.

$(document).ajaxStop(function() {
  // place code to be executed on completion of last outstanding ajax call here
});

어려운 방법

또한 Ajax 콜이 아직 활성화되어 있는지 여부를 수동으로 검출할 수도 있습니다.

활성 Ajax 연결 수를 포함하는 변수를 만듭니다.

var activeAjaxConnections = 0;

새 Ajax 연결을 열기 직전에 해당 변수가 증가합니다.

$.ajax({
  beforeSend: function(xhr) {
    activeAjaxConnections++;
  },
  url (...)

에success해당 변수가 0인지 부품 확인(그렇다면 마지막 연결이 종료됨)

success: function(html){
  activeAjaxConnections--;
  $('#result_'+rowNum).empty().append(html);
  $('#coda_'+rowNum).removeClass("loading");
  $('#coda_'+rowNum).addClass("loader");
  if (0 == activeAjaxConnections) {
    // this was the last Ajax connection, do the thing
  }
},
error: function(xhr, errDesc, exception) {
  activeAjaxConnections--;
  if (0 == activeAjaxConnections) {
    // this was the last Ajax connection, do the thing
  }
}

보시는 바와 같이 반품 확인도 추가했습니다.

깔끔한 솔루션은 다음과 같습니다.

$("body").ajaxStop(function() {
    //Your code
});

자세한 내용은 http://api.jquery.com/ajaxStop/에서 jQuery .ajaxStop 함수를 참조하십시오.

아마도:

jQuery.active == 0

도난처:

http://artsy.github.com/blog/2012/02/03/reliably-testing-asynchronous-ui-w-slash-rspec-and-capybara/

StackOverflow 상세:

jQuery.active 함수

만약을 간단하게 사용하는 것은 어떻습니까?

success: function(html){
   if(html.success == true ){
            $('#result_'+rowNum).empty().append(html);
            $('#coda_'+rowNum).removeClass("loading");
            $('#coda_'+rowNum).addClass("loader");

          }
   }

언급URL : https://stackoverflow.com/questions/287188/how-to-know-when-all-ajax-calls-are-complete