728x90
1. HTML 구조
먼저 Ajax는 화면과 직접적으로 연결되며 버튼과 눌렀을 시 결과를 나타낼 영역을 HTML로 만들어 보겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>JQuery Ajax</title>
<script src="../version/jquery-3.7.1.min.js"></script>
</head>
<body>
<!-- Ajax 요청 -->
<button id="loadBtn">데이터 불러오기</button>
<!-- Ajax 결과 표시 -->
<div id="result">데이터 표시</div>
<!-- Javascript 실행 -->
<script src="app.js"></script>
</body>
</html>
여기까지는 화면의 기본 틀을 만들며 버튼이 클릭될 시 서버에서 데이터를 가져와 #result에 표시될 것입니다.
2. JavaScript(jQuery)로 이벤트와 Ajax 연결
app.js 파일을 생성해 다음과 같이 작성해줍니다.
// DOM 준비되면 실행
$(document).ready(function () {
// 버튼 클릭 이벤트 핸들러
$("#loadBtn").click(function () {
console.log(
"Button Clicked! +" +
new Date().toDateString() +
" " +
new Date().toLocaleDateString() +
" "
);
// Ajax 요청
$.ajax({
url: "https://jsonplaceholder.typicode.com/posts/1",
type: "GET", // HTTP 메소드
dataType: "json", // 응답 데이터 타입
success: function (data) {
// 요청 성공 시 실행되는 콜백 함수
console.log("Data Loaded: ", data);
// 결과를 HTML에 표시
$("#result").html(`<h3>${data.title}</h3><p>${data.body}</p>`);
},
error: function (xhr, status, error) {
console.error("Error: ", error);
// 오류 발생 시 HTML 오류 메시지 표시
$("#result").html("<p>ERROR: Data could not be Loaded</p>");
},
});
});
});
3. 실행 흐름
- 브라우저가 HTML 로드
- <script src="../version/jquery-3.7.1.min.js"> 로 jQuery를 불러옴
- <script src="app.js">로 스크립트 로드
- $(document).ready() 실행
- HTML 요소가 다 준비되면 버튼 클릭 이벤트 연결
- 사용자가 버튼 클릭
- $('#loadBtn').click(...) 안의 함수 실행
- $.ajax()로 서버에 요청 보냄
- 서버 응답
- 성공 시 - success 콜백 실행 - #result에 데이터 표시
- 실패 시 - error 실행 - 에러 메시지 표시
- 실행 화면
- 처음 - #result에 실행 전 결과를 표시
- 버튼 클릭 -> 콘솔창에 "Button Clicked" 메시지 뜸 -> Ajax 실행 출력
- 서버 응답 -> 제목과 본문이 화면에 뜸
GitHub - jQuicker/jQuery-bloging
Contribute to jQuicker/jQuery-bloging development by creating an account on GitHub.
github.com
728x90
LIST
'Back-End > JQuery' 카테고리의 다른 글
| [JQuery] 5장 애니메이션 (0) | 2025.03.18 |
|---|---|
| [JQuery] 4장 JQuery 이벤트 처리 (0) | 2025.03.01 |
| [JQuery] 3장 JQuery DOM 조작 (0) | 2025.02.27 |
| [JQuery] 2장 JQuery 기본 문법 (0) | 2025.02.24 |
| [JQuery] 1장 JQuery는 무엇인가? Jquery세팅법 (1) | 2025.02.16 |