간단한 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

Gaspare SgangaGaspare Sganga