Ajax html 페이지 가져오기
간단한 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
](https://gasparesganga.com/labs/jquery-loading-overlay/#examples)