Ajax html 페이지 가져오기

Ajax html 페이지 가져오기
Photo by Mike van den Bos / Unsplash

간단한 Ajax 로 페이지 가져오기 예제

자세한 내용은 Ajax + Django로 한 페이지에서 다른 html 띄우기 에서 읽어보세요!

<button id='listButton'></button>
<div id='example'></div>

해당 페이지에 아래 스크립트를 추가하면 , example 로 지정한 div에 결과 내용이 출력되게 되어 있다. 접속 주소만 쓰면, 활용할 수 있다.

로딩중 처리를 위해서 "LoadingOverlay"라는 라이브러리를 활용하는 것도 같이 넣어 봤다.


$('#listButton').click(function() {
// Show full page LoadingOverlay
        $.LoadingOverlay("show");
        $.ajax({
            type: "GET",
            url:"{% url 'result_list' %}", // list url을 불러옴
            dataType: 'html', // list의 형태는 html
            success: function(data){ // 성공했을 때 일단 good을 alert로 띄운다.
                alert('good');
                $('#example').html(data) // 그 이후에 example div에 list html의 data를 가져온다.
            },
            error: function(request, status, error){ // 실패했을 때 bad alert, 에러가 무엇이었는지, 그리고 간단한 html 출력
                alert('bad');
                alert(error);
                $('#example').html('AJAX 통신에 실패했습니다.');
            }
        })
        $.LoadingOverlay("hide");
});

페이지 로딩 중 자바스크립트

JQuery를 이용한 로딩 처리, 아래 페이지에 예와 라이브러리 참고하자!

jQuery LoadingOverlay - Gaspare Sganga
A flexible loading overlay jQuery plugin