[jQuery] load() 메서드 사용법, 예제, 데이터 전달 (페이지 로드)

아래 소스 코드는 load() 메서드를 사용해서 버튼을 클릭하면 외부 페이지(t2.html)를 로드하고, 로드가 완료되면 버튼을 숨기는 화면입니다. 외부 페이지로 변수를 전달하고 노출도 시키고 있습니다.

 

사용방법

$(선택자).load(URL, [데이터], [콜백 함수]);

 

ㅇ 선택자 : 로드한 컨텐츠를 삽입할 요소를 선택합니다.
ㅇ URL : 로드할 리소스(외부 페이지 또는 파일)의 URL을 지정합니다.
ㅇ 데이터 (선택 사항) : 서버로 전송할 데이터를 지정합니다. 주로 POST 요청에 사용됩니다.
ㅇ 콜백 함수 (선택 사항) : 로드가 완료된 후 실행할 함수를 정의합니다. 이 함수는 로드가 성공하거나 실패했을 때 호출됩니다.

 

 

특징

ㅇ 비동기적 로드 : load() 메서드는 비동기 방식으로 동작하며, 페이지의 리로드 없이 외부 리소스를 로드합니다.
ㅇ 로드된 컨텐츠 삽입 : 로드한 컨텐츠는 선택한 요소 내에 자동으로 삽입됩니다. 삽입 위치는 선택한 요소에 의해 결정됩니다.
ㅇ 캐싱 : 동일한 리소스를 다시 로드하지 않고 저장된 데이터를 사용할 수 있습니다.
ㅇ 서버 요청 : 기본적으로 GET 요청을 사용하여 데이터를 로드합니다. 필요한 경우 데이터를 POST 요청으로 전달할 수도 있습니다.
ㅇ 콜백 함수 : 로드가 완료된 후 실행할 콜백 함수를 지정할 수 있으며, 로드 성공 또는 실패 여부를 확인하고 추가 작업을 수행할 수 있습니다.

 

---

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
	/* 전체 컨테이너 스타일 */
	.container {
		display: flex;
		justify-content: space-between;
	}
	/* 왼쪽 영역 스타일 */
	.left {
		flex: 1;
		background-color: #f0f0f0;
		padding: 20px;
	}
	/* 오른쪽 영역 스타일 */
	.right {
		flex: 1;
		background-color: #e0e0e0;
		padding: 20px;
	}
	/* 오른쪽 영역 내의 로드 버튼 스타일 */
	#load-button {
		padding: 10px;
		background-color: #007BFF;
		color: #fff;
		border: none;
		cursor: pointer;
	}
</style>
<div class="container">
	<div class="left">
		<h2>왼쪽 영역</h2>
		<p>이 부분은 왼쪽에 위치한 영역입니다.</p>
	</div>
	<div class="right">
		<h2>오른쪽 영역</h2>
		<div id="loaded-content">
			<!-- 오른쪽 영역에 로드된 내용이 여기에 표시됩니다. -->
		</div>
		<button id="load-button">외부 페이지 로드</button>
	</div>
</div>
<script>
	// "외부 페이지 로드" 버튼 클릭 시 오른쪽 영역에 외부 페이지를 로드합니다.var dynamicParam = "custom-value"; // 동적 매개변수 값 설정
	$(".right").on("click", "#load-button", function() {
		 var dynamicParam = "반갑습니다.";
		 $("#loaded-content").load("t2.html?param=" + dynamicParam, function() {
			// 로드가 완료되면 버튼 숨기기
			$("#load-button").hide();
		});
	});
</script>

---

 

t2.html

<?php
$param = $_GET['param'];
?>
<h2>외부 페이지의 내용</h2>
<p>이것은 외부 페이지의 내용입니다. </p>
<p style="color:red;">동적으로 생성된 내용입니다. 매개변수 값: <?=$param?></p>

 

---

 

소스 코드 화면

 

load 메서드로 외부 페이지 로드