📌 jQuery Ajax – 화면 일부 갱신하기
Ajax(Asynchronous JavaScript and XML)는 웹 페이지 전체를 새로고침하지 않고,
일부분만 비동기적으로 갱신할 수 있게 해줍니다.
jQuery에서는 $.ajax() 메서드를 통해 이를 간단히 구현할 수 있습니다.
✅ 예제 코드 설명
1. menu1 클릭 시
$('#menu1').click(function (e) {
$.ajax({
url: "menu.html", // 불러올 파일
dataType: "html", // 데이터 타입
success: function (data) {
$('#message1').html("성공<br>" + data);
},
error: function () {
alert("실패");
}
});
});- menu.html 파일을 가져와서
- #message1 영역에 그대로 출력합니다.
- 성공 여부를 표시하기 위해 "성공<br>" 텍스트를 앞에 추가했습니다.
2. menu2 클릭 시
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ex05_ajax.html</title>
<style type="text/css">
div {
width: 200px; height: 300px;
margin: 3px; float: left;
}
</style>
<script type="text/javascript" src="../js/jquery.js" ></script>
<script type="text/javascript">
// 화면의 일부분만 변경
$(function () {
$('#menu1').click(function (e) {
// a 태그 기본 동작 방지
$.ajax({
url: "menu.html",
dataType: "html",
success: function (data) {
$('#message1').html("성공<br>" + data);
},
error: function () {
alert("실패");
}
});
});
$('#menu2').click(function (e){
$.ajax({
url : "menu.html",
dataType : "html",
success:function(data){
// 성공했을때 객체로 만들어서 함수를 적용하여 자손(li)출력
$('#message2').html($(data).find('li'));
},
error:function(){
alert('실패');
}
})
});
});
</script>
</head>
<body>
<!--
id : 입력 : 입력칸 형식이 맞지않습니다.
pw : 입력 : 입력칸 형식이 맞지않습니다.
등등 중복된 아이디를 출력하는데에 사용
-->
<!-- clear:left 를 이용해서 div를 왼쪽에 붙여출력 되는걸 막아 아래쪽에 출력됨. -->
<div>
<a href="#" id="menu1">메뉴 보기 1</a><p>
<span id="message1"></span>
</div>
<div>
<a href="#" id="menu2">메뉴 보기 2</a><p>
<span id="message2"></span>
</div>
<div style="clear:left">
<h3>ajax 예제입니다.</h3>
</div>
</body>
</html>
📝 정리
- Ajax를 활용하면 페이지 전체 새로고침 없이 일부만 업데이트 가능
- menu1 → 불러온 HTML 전체 출력
- menu2 → 특정 태그(<li>)만 골라서 출력
'기초 및 언어 > ▶ JavaScript&JQuery' 카테고리의 다른 글
| 13. JQuery 문서를 테이블로 만들기, ajax/getJSON/get (1) | 2025.09.09 |
|---|---|
| 11. JQuery _ .magify(); 확대 (0) | 2025.09.09 |
| 10. Jquery_ .animate()를 활용한 이미지 슬라이드 (0) | 2025.09.09 |
| 09. jQuery_ .show() 와 .hide() 사용 (1) | 2025.09.09 |
| 08. jQuery_change() (1) | 2025.09.09 |