[jQuery] 18. Ajax 기초 사용법
지난 글에서는 jQuery의 form 이벤트를 사용해서 입력값 검사, 선택값 변경, 글자 수 세기 같은 기능을 만드는 방법을 알아봤습니다.
이번 글에서는 서버와 데이터를 주고받을 때 사용하는 Ajax에 대해 알아보겠습니다.
Ajax를 사용하면 페이지를 새로고침하지 않고도 서버에서 데이터를 가져오거나 서버로 데이터를 보낼 수 있습니다.
1. Ajax란?
Ajax는 웹 페이지 전체를 다시 불러오지 않고, 필요한 데이터만 서버와 주고받는 방식입니다.
예를 들어 게시글 목록 더보기, 댓글 작성, 아이디 중복 확인, 검색 자동완성, 좋아요 버튼 같은 기능은 Ajax로 만들 수 있습니다.
- 페이지 새로고침 없이 데이터 요청 가능
- 서버에서 받은 데이터를 화면 일부에만 표시 가능
- 사용자 경험이 더 자연스러워짐
- 댓글, 검색, 좋아요, 장바구니 등에 자주 사용
2. Ajax가 필요한 이유
Ajax가 없으면 데이터를 새로 받아올 때마다 페이지 전체가 다시 로딩될 수 있습니다.
하지만 Ajax를 사용하면 필요한 부분만 바꿀 수 있습니다.
📌 예시
- 댓글 작성 후 댓글 목록만 갱신
- 검색어 입력 후 결과 영역만 갱신
- 좋아요 버튼 클릭 후 숫자만 변경
- 카테고리 선택 후 상품 목록만 변경
즉, Ajax는 화면을 더 부드럽고 빠르게 느껴지도록 만들어주는 중요한 기술입니다.
3. jQuery Ajax 기본 형태
jQuery에서는 $.ajax()를 사용해서 Ajax 요청을 보낼 수 있습니다.
📌 기본 문법
$.ajax({
url: "요청할 주소",
method: "GET",
dataType: "json",
success: function(result) {
// 요청 성공 시 실행
},
error: function() {
// 요청 실패 시 실행
}
});처음에는 옵션이 많아 보여도 핵심은 어렵지 않습니다.
- url : 데이터를 요청할 서버 주소입니다.
- method : GET, POST 같은 요청 방식입니다.
- data : 서버로 보낼 데이터입니다.
- dataType : 서버에서 받을 데이터 형식입니다.
- success : 요청이 성공했을 때 실행됩니다.
- error : 요청이 실패했을 때 실행됩니다.
4. GET 방식이란?
GET 방식은 서버에서 데이터를 가져올 때 주로 사용합니다.
게시글 목록 조회, 상품 목록 조회, 검색 결과 조회처럼 데이터를 읽어오는 기능에 많이 사용됩니다.
📌 GET 요청 예시
$.ajax({
url: "/api/posts",
method: "GET",
success: function(result) {
console.log(result);
},
error: function() {
alert("데이터를 불러오지 못했습니다.");
}
});위 코드는 /api/posts 주소로 데이터를 요청하고, 성공하면 result에 서버 응답이 들어오는 구조입니다.
5. 버튼 클릭 시 데이터 불러오기
이번에는 버튼을 클릭했을 때 서버에서 데이터를 불러오는 구조를 만들어보겠습니다.
📌 예제 코드
<button id="loadBtn">데이터 불러오기</button>
<div id="result">결과가 여기에 표시됩니다.</div>
<script>
$("#loadBtn").click(function() {
$.ajax({
url: "/api/message",
method: "GET",
success: function(data) {
$("#result").text(data.message);
},
error: function() {
$("#result").text("데이터를 불러오지 못했습니다.");
}
});
});
</script>📌 실행 흐름
- 데이터 불러오기 버튼을 클릭합니다.
- /api/message 주소로 GET 요청을 보냅니다.
- 요청이 성공하면 result 영역에 message 값을 출력합니다.
- 요청이 실패하면 오류 문구를 출력합니다.
6. JSON 데이터란?
Ajax에서 서버와 데이터를 주고받을 때 JSON 형식을 자주 사용합니다.
JSON은 JavaScript 객체처럼 생긴 데이터 형식입니다.
📌 JSON 예시
{
"name": "홍길동",
"age": 20,
"job": "학생"
}서버에서 위와 같은 데이터가 오면 jQuery에서 name, age, job 값을 꺼내 화면에 표시할 수 있습니다.
7. JSON 데이터 화면에 출력하기
서버에서 JSON 데이터를 받았다고 가정하고 화면에 출력해보겠습니다.
📌 예제 코드
<button id="userBtn">회원 정보 불러오기</button>
<div id="userInfo"></div>
<script>
$("#userBtn").click(function() {
$.ajax({
url: "/api/user",
method: "GET",
dataType: "json",
success: function(user) {
$("#userInfo").html(
"<p>이름: " + user.name + "</p>" +
"<p>나이: " + user.age + "</p>" +
"<p>직업: " + user.job + "</p>"
);
},
error: function() {
$("#userInfo").text("회원 정보를 불러오지 못했습니다.");
}
});
});
</script>📌 서버 응답 예시
{
"name": "홍길동",
"age": 20,
"job": "학생"
}📌 실행 결과
- 회원 정보 불러오기 버튼을 클릭합니다.
- 서버에서 JSON 데이터를 받아옵니다.
- 이름, 나이, 직업이 화면에 표시됩니다.
8. 배열 데이터 반복 출력하기
서버에서 게시글 목록처럼 여러 개의 데이터가 배열로 올 수 있습니다.
📌 서버 응답 예시
[
{ "title": "첫 번째 글", "writer": "홍길동" },
{ "title": "두 번째 글", "writer": "김철수" },
{ "title": "세 번째 글", "writer": "이영희" }
]이런 배열 데이터는 $.each()를 사용해서 반복 출력할 수 있습니다.
📌 예제 코드
<button id="postBtn">게시글 불러오기</button>
<ul id="postList"></ul>
<script>
$("#postBtn").click(function() {
$.ajax({
url: "/api/posts",
method: "GET",
dataType: "json",
success: function(posts) {
$("#postList").empty();
$.each(posts, function(index, post) {
var li = $("<li></li>").text(post.title + " - " + post.writer);
$("#postList").append(li);
});
},
error: function() {
alert("게시글 목록을 불러오지 못했습니다.");
}
});
});
</script>📌 실행 흐름
- 게시글 불러오기 버튼을 클릭합니다.
- /api/posts 주소로 게시글 목록을 요청합니다.
- 받아온 배열 데이터를 하나씩 반복합니다.
- 각 게시글을 li 태그로 만들어 목록에 추가합니다.
9. POST 방식이란?
POST 방식은 서버로 데이터를 보낼 때 주로 사용합니다.
회원가입, 로그인, 게시글 작성, 댓글 작성처럼 사용자가 입력한 데이터를 서버에 저장하거나 처리할 때 많이 사용됩니다.
📌 POST 요청 예시
$.ajax({
url: "/api/comments",
method: "POST",
data: {
content: "댓글 내용입니다."
},
success: function(result) {
alert("댓글이 등록되었습니다.");
},
error: function() {
alert("댓글 등록에 실패했습니다.");
}
});data 안에 작성한 값이 서버로 전달됩니다.
10. form 입력값을 Ajax로 보내기
form 이벤트와 Ajax를 함께 사용하면 페이지 이동 없이 입력값을 서버로 보낼 수 있습니다.
📌 예제 코드
<form id="commentForm">
<input type="text" id="commentInput" placeholder="댓글 입력">
<button type="submit">등록</button>
</form>
<p id="message"></p>
<script>
$("#commentForm").on("submit", function(event) {
event.preventDefault();
var content = $("#commentInput").val().trim();
if (content === "") {
$("#message").text("댓글을 입력해주세요.");
return;
}
$.ajax({
url: "/api/comments",
method: "POST",
data: {
content: content
},
success: function() {
$("#message").text("댓글이 등록되었습니다.");
$("#commentInput").val("");
},
error: function() {
$("#message").text("댓글 등록에 실패했습니다.");
}
});
});
</script>📌 실행 흐름
- 댓글을 입력합니다.
- 등록 버튼을 클릭합니다.
- form의 기본 제출을 막습니다.
- 입력값이 비어 있는지 검사합니다.
- Ajax POST 요청으로 댓글 내용을 서버에 보냅니다.
- 성공하면 완료 문구를 표시하고 input을 비웁니다.
11. $.get() 사용하기
GET 요청을 간단하게 작성하고 싶을 때는 $.get()을 사용할 수 있습니다.
📌 기본 문법
$.get("요청 주소", function(data) {
// 성공 시 실행
});📌 예제 코드
<button id="getBtn">GET 요청</button>
<div id="result"></div>
<script>
$("#getBtn").click(function() {
$.get("/api/message", function(data) {
$("#result").text(data.message);
});
});
</script>간단한 GET 요청은 $.get()으로 짧게 작성할 수 있습니다.
12. $.post() 사용하기
POST 요청을 간단하게 작성하고 싶을 때는 $.post()를 사용할 수 있습니다.
📌 기본 문법
$.post("요청 주소", 보낼데이터, function(result) {
// 성공 시 실행
});📌 예제 코드
<button id="postBtn">POST 요청</button>
<script>
$("#postBtn").click(function() {
$.post(
"/api/comments",
{ content: "새 댓글입니다." },
function(result) {
alert("등록이 완료되었습니다.");
}
);
});
</script>복잡한 설정이 필요하지 않은 간단한 POST 요청은 $.post()로 작성할 수 있습니다.
13. loading 문구 표시하기
Ajax 요청은 서버 응답을 기다리는 시간이 있을 수 있습니다.
이때 사용자에게 로딩 중이라는 문구를 보여주면 더 자연스럽습니다.
📌 예제 코드
<button id="loadBtn">목록 불러오기</button>
<p id="status"></p>
<ul id="list"></ul>
<script>
$("#loadBtn").click(function() {
$("#status").text("불러오는 중입니다...");
$.ajax({
url: "/api/items",
method: "GET",
dataType: "json",
success: function(items) {
$("#list").empty();
$.each(items, function(index, item) {
$("#list").append($("<li></li>").text(item.name));
});
$("#status").text("불러오기가 완료되었습니다.");
},
error: function() {
$("#status").text("목록을 불러오지 못했습니다.");
}
});
});
</script>📌 실행 흐름
- 버튼을 클릭하면 먼저 로딩 문구가 표시됩니다.
- 서버 요청이 성공하면 목록을 화면에 출력합니다.
- 성공 문구 또는 오류 문구를 표시합니다.
14. 전체 예제
이번에는 게시글 목록을 불러오고, 새 게시글을 등록하는 간단한 Ajax 예제를 만들어보겠습니다.
📌 예제 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery Ajax 기초</title>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
#postList {
margin-top: 15px;
padding: 0;
list-style: none;
}
#postList li {
padding: 10px;
margin-bottom: 8px;
background: #eeeeee;
border-radius: 6px;
}
#status {
margin-top: 10px;
font-weight: bold;
}
</style>
</head>
<body>
<h2>jQuery Ajax 기초 공부</h2>
<button id="loadBtn">게시글 불러오기</button>
<form id="postForm" style="margin-top:15px;">
<input type="text" id="titleInput" placeholder="제목 입력">
<button type="submit">등록</button>
</form>
<p id="status"></p>
<ul id="postList"></ul>
<script>
$(function() {
$("#loadBtn").click(function() {
$("#status").text("게시글을 불러오는 중입니다...");
$.ajax({
url: "/api/posts",
method: "GET",
dataType: "json",
success: function(posts) {
$("#postList").empty();
$.each(posts, function(index, post) {
var li = $("<li></li>").text(post.title);
$("#postList").append(li);
});
$("#status").text("게시글을 불러왔습니다.");
},
error: function() {
$("#status").text("게시글을 불러오지 못했습니다.");
}
});
});
$("#postForm").on("submit", function(event) {
event.preventDefault();
var title = $("#titleInput").val().trim();
if (title === "") {
$("#status").text("제목을 입력해주세요.");
return;
}
$.ajax({
url: "/api/posts",
method: "POST",
data: {
title: title
},
success: function() {
$("#status").text("게시글이 등록되었습니다.");
$("#postList").prepend($("<li></li>").text(title));
$("#titleInput").val("");
},
error: function() {
$("#status").text("게시글 등록에 실패했습니다.");
}
});
});
});
</script>
</body>
</html>📌 실행 결과
- 게시글 불러오기 버튼을 클릭하면 서버에서 목록을 가져옵니다.
- 가져온 게시글 제목이 ul 안에 li로 표시됩니다.
- 제목을 입력하고 등록하면 Ajax POST 요청을 보냅니다.
- 등록이 성공하면 새 게시글이 목록 위에 추가됩니다.
- 오류가 발생하면 상태 문구로 실패를 알려줍니다.
15. 자주 하는 실수
📌 1. url 주소를 잘못 쓰는 경우
Ajax 요청에서 url 주소가 틀리면 서버에 제대로 요청할 수 없습니다.
// 예시
url: "/api/posts"실제 프로젝트에서는 백엔드에서 만든 API 주소와 정확히 맞춰야 합니다.
📌 2. GET과 POST를 헷갈리는 경우
데이터를 가져올 때는 GET, 데이터를 등록하거나 보낼 때는 POST를 주로 사용합니다.
// 목록 조회
method: "GET"
// 데이터 등록
method: "POST"📌 3. 서버 응답 구조를 확인하지 않는 경우
서버에서 어떤 이름으로 데이터가 오는지 확인해야 합니다.
// 서버 응답이 { "title": "첫 글" } 이라면
post.title응답 이름이 title인지, name인지, content인지 확인하고 사용해야 합니다.
📌 4. error 처리를 안 하는 경우
Ajax 요청은 실패할 수도 있습니다. 그래서 error 처리를 넣어주는 것이 좋습니다.
error: function() {
alert("요청 처리 중 오류가 발생했습니다.");
}📌 5. form에서 preventDefault()를 빼먹는 경우
form submit에서 Ajax를 사용할 때 기본 제출을 막지 않으면 페이지가 새로고침될 수 있습니다.
$("#form").on("submit", function(event) {
event.preventDefault();
});📌 6. jQuery 연결을 빼먹는 경우
Ajax 기능도 jQuery 기능이므로 jQuery 라이브러리를 먼저 연결해야 합니다.
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>16. 핵심 정리
- Ajax는 페이지 새로고침 없이 서버와 데이터를 주고받는 방식입니다.
- jQuery에서는 $.ajax()로 Ajax 요청을 보낼 수 있습니다.
- GET은 서버에서 데이터를 가져올 때 주로 사용합니다.
- POST는 서버로 데이터를 보낼 때 주로 사용합니다.
- url은 요청할 서버 주소입니다.
- data는 서버로 보낼 값입니다.
- success는 요청 성공 시 실행됩니다.
- error는 요청 실패 시 실행됩니다.
- 배열 데이터는 $.each()로 반복 출력할 수 있습니다.
- form submit과 Ajax를 함께 사용할 때는 event.preventDefault()가 필요합니다.
이번 글에서는 jQuery의 Ajax 기초 사용법에 대해 알아봤습니다.
Ajax는 처음에는 어렵게 느껴질 수 있지만, 핵심은 서버에 요청을 보내고 응답을 받아 화면에 표시하는 것입니다.
다음 글에서는 [jQuery] 19. Ajax로 검색 기능 만들기에 대해 알아보겠습니다.
'Computer Science > JQuery' 카테고리의 다른 글
| [jQuery] 20. 자주 하는 실수와 마무리 정리 (0) | 2026.07.01 |
|---|---|
| [jQuery] 19. Ajax로 검색 기능 만들기 (0) | 2026.06.30 |
| [jQuery] 17. form 이벤트 사용법 (0) | 2026.06.28 |
| [jQuery] 16. siblings(), next(), prev() 사용법 (0) | 2026.06.28 |
| [jQuery] 15. parent(), children(), find() 사용법 (0) | 2026.06.26 |