13
2017-Sep
[jQuery] 페이지 부분 새로고침
작성자: 
Blonix
IP ADRESS: *.64.228.3 조회 수: 1126
출처:: http://devstar21.blogspot.kr/2015/01/jquery.html
Case 1
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("demo_test.txt");
});
});
</script>
</head>
<body>
<div id="div1">
<h2>Let jQuery AJAX Change This Text</h2>
</div>
<button>Get External Content</button>
</body>
</html>Case 2
An easy, but not good way for performance.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").load(window.location.href+" #div1 h2");
});
});
</script>
</head>
<body>
<div id="div1">
<h2>Let jQuery AJAX Change This Text</h2>
</div>
<button>Get External Content</button>
</body>
</html>
아래와 같은 방식으로 인터벌 설정한 새로고침도 가능하다.
<script>function autoRefresh_sample_div(){var currentLocation = window.location;$("#sample").fadeOut('slow').load(currentLocation + ' #sample').fadeIn("slow");}setInterval('autoRefresh_sample_div()', 30000); //30초 후 새로고침</script>