• Q&A
  • 회원가입
  • 로그인

[AJAX] JQ - ajaxComplete() (아작스컴플리트) - AJAX 요청이 완료 될 때 실행할 함수 지정

예제

 

test.txt 내용

 

홈짱닷컴 Homzzang.com

 

 

test.php 내용

 

<!DOCTYPE html>

<html>

<head>

<style>

#wait {

display:none;width:69px;height:89px;border:1px solid black;

position:absolute;top:50%;left:50%;padding:2px;

}

#wait img {

width:64;

height:64;

}

</style>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

    $(document).ajaxStart(function(){

        $("#wait").css("display", "block");

    });

    $(document).ajaxComplete(function(){

        $("#wait").css("display", "none");

    });

    $("button").click(function(){

        $("#txt").load("test.txt");

    });

});

</script>

</head>

<body>


<div id="txt"><h2>여기는 어디?</h2></div>


<button>알려줘.</button>


<div id="wait"><img src='demo_wait.gif'><br>로딩 중</div>


</body>

</html>

 

 

 

 

ajaxComplete () 메서드 정의와 사용법

 

AJAX 요청이 완료 될 때 실행할 함수를 지정.



PS.


1.

jQuery 버전 1.8부터이 메소드는 문서에만 첨부해야 함.


2.

ajaxSuccess ()와 달리,

ajaxComplete () 메소드로 지정된 함수는 요청이 완료되면 성공하지 못해도 실행 됨.

 

 

 

 

구문

 

$(document).ajaxComplete(function(event,xhr,options))

 

 

 

 

매개변수

 

function (event, xhr, options)
필수. 요청이 완료 될 때 실행할 함수를 지정.


event - 이벤트 객체를 포함.

xhr - XMLHttpRequest 객체를 포함.

options - AJAX 요청에 사용 된 옵션을 포함.



오늘도 즐겁게 열심히 .....

찾아주셔서 감사합니다. Since 2012