JQuery
[jQuery] load
NamGH
2023. 9. 22. 11:27
load : Ajax 기능으로 페이지를 동적으로 로드하기 위해서는 load() 메소드를 호출한다.
완료된 응답을 일치하는 집합에 있는 엘리먼트의 콘텐츠로 삽입한다
매개변수
url : 요청할 URL 주소
data : 요청할 때 서버에 보낼 자바스크립트 객체 맵이나 문자열 형식의 데이터
success :요청이 성공했을 때 호출할 함수
error : 요청이 실패했을때 호출할 함수
예제
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div{
float: left;
width: 200px;
height: 300px;
margin: 10px;
}
</style>
<script src=../js/jquery.js type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('#menu1').click(function(){
$('#message1').load('menu.html');
});
$('#menu2').click(function(){
$('#message2').load('menu.html li');
});
});
</script>
</head>
<body>
<div>
<a href="#" id = "menu1">메뉴보기 1</a>
<span id = "message1"></span>
</div>
<div>
<a href="#" id = "menu2">메뉴보기 2</a>
<span id = "message2"></span>
</div>
</body>
</html>
실행결과