티스토리 뷰

WEB/jQuery

[jQuery] 비동기식 페이지 로드, load()

춘햄 2021. 6. 7. 17:03

load() 함수를 이용하면 원하는 페이지를 비동기 방식으로 해당 페이지에 로드할 수 있다.

바로 확인해보자.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

<title>동적으로 원격 페이지 로드</title>

<script src="jquery-1.6.2.js" type="text/javascript"></script>

<script type="text/javascript">
	$(document).ready(function() {
		$('#btn .btnLoad').click(function() {
			$('#ctlGrid').load('HtmlSamplePage.html');
			
			window.alert("HttpSamplePage.html이 로드되기 전에 먼저 경고창이 나타납니다.");
		});
	});
</script>

</head>

<body>

	<div id="btn">
		<div class="btnLoad">HTML읽어오기 버튼</div>
	</div>

	<div id="ctlGrid"></div>

</body>

</html>

보면, alert가 load 뒷부분에 작성되었지만, alert창이 나온 뒤에 로드되는 것을 확인할 수 있다.

반응형

'WEB > jQuery' 카테고리의 다른 글

[jQuery] Effects  (0) 2021.06.07
[jQuery] 동적으로 요소 추가  (0) 2021.06.07
[jQuery] Traversing  (0) 2021.06.07
[jQuery] bind & unbind  (0) 2021.06.07
[jQuery] 다양한 Selector 이용  (0) 2021.06.07
공유하기 링크
Comments
Related Articles more