$.getJSON()과 .done()을 활용한 API 데이터 처리 방법을 초보자도 쉽게 이해할 수 있도록 구성했으며, 키워드도 자연스럽게 포함하여 SEO에도 최적화했습니다.
🔍 jQuery $.getJSON() 완벽 이해! | 초보 웹개발자를 위한 API 데이터 처리 기초
웹사이트에서 외부 데이터(API)를 불러와 화면에 출력하고 싶을 때, 가장 자주 사용되는 방법 중 하나가 바로 **$.getJSON()**입니다.
특히 jQuery를 사용할 때는 이 방식이 매우 직관적이고 간편하기 때문에, 초보 개발자라면 반드시 익혀야 할 기본기 중 하나입니다.
오늘은 실제 사용 예제를 바탕으로 $.getJSON()의 구조와 사용법을 쉽게 설명드릴게요.
✅ 예제 코드부터 살펴보기
$.getJSON(apiCountsUrl)
.done(function(data){
if (!data || !Array.isArray(data)) {
console.warn('API 응답이 올바르지 않음:', data);
return;
}
// 데이터 처리 로직...
});
위 코드는 특정 URL에서 데이터를 가져와서, 조건에 맞게 처리하는 기본적인 구조입니다.
✅ $.getJSON()이란?
jQuery에서 제공하는 AJAX 비동기 통신 함수로,
JSON 형식의 데이터를 GET 방식으로 받아올 때 사용됩니다.
📌 기본 문법
$.getJSON(url, data, successCallback)
- url: 요청을 보낼 API 주소
- data (선택): 서버에 보낼 데이터 (쿼리 파라미터)
- successCallback: 요청이 성공했을 때 실행할 함수
요즘은 successCallback 대신 .done()을 많이 사용합니다. Promise 기반이라 코드 관리가 편리하기 때문이죠.
✅ .done()은 무슨 역할?
.done()은 서버 요청이 성공했을 때 실행할 작업을 정의합니다.
$.getJSON()과 함께 사용하면 코드를 더 직관적이고 깔끔하게 작성할 수 있어요.
✅ 데이터 유효성 검사하기
if (!data || !Array.isArray(data)) {
console.warn('API 응답이 올바르지 않음:', data);
return;
}
👀 이 코드는 무엇을 하나요?
- data가 **빈 값(null, undefined)**일 경우를 확인
- data가 배열인지 여부를 확인
- 문제가 있을 경우 console.warn()으로 경고 로그 출력 후 함수 종료
👉 API에서 받은 데이터가 예상한 형식인지 먼저 확인하는 습관은 매우 중요합니다.
✅ 이런 분께 도움이 되는 글입니다
- jQuery를 처음 배우고 AJAX 요청을 구현해보고 싶은 분
- API에서 JSON 데이터를 받아 웹사이트에 출력하고 싶은 분
- .done()이나 Array.isArray() 같은 코드가 낯선 웹개발 입문자
- 오류 없이 안정적인 프론트엔드-백엔드 연동을 구현하고 싶은 분
이 글을 통해 AJAX의 기본 구조부터 실제 실무에 사용할 수 있는 데이터 처리 방식까지 차근차근 익히실 수 있습니다.
✅ 보너스! 실패 처리도 추가해보자
.fail(function(jqXHR, textStatus, errorThrown) {
console.error("데이터 로딩 실패:", textStatus, errorThrown);
});
요렇게 .fail()을 붙이면 요청 실패 시도 에러 로그를 남길 수 있습니다.
디버깅이나 오류 대응에 큰 도움이 되겠죠?
🧠 초보자를 위한 JSON이란? 완벽 설명
이전 글에서 jQuery의 $.getJSON()을 통해 서버에서 JSON 데이터를 받아오는 방법을 배웠습니다.
하지만 여기서 궁금증이 하나 생길 수 있죠.
"근데... JSON이 정확히 뭐죠?"
"왜 JSON으로 데이터를 주고받는 걸까요?"
이번 글에서는 바로 그 질문에 답해드리겠습니다.
JSON의 개념부터 실제 예제, 그리고 사용 이유까지 차근차근 설명드릴게요.
✅ JSON이란?
JSON(JavaScript Object Notation)은
자바스크립트 객체 문법을 기반으로 한 데이터 교환 형식입니다.
쉽게 말하면, 사람이 읽기 쉽고 컴퓨터가 처리하기 편한 방식의 데이터 포맷이에요.
웹에서 서버와 클라이언트가 데이터를 주고받을 때 가장 많이 사용됩니다.
✅ 왜 JSON을 쓰나요?
- ✅ 가볍고 빠름
→ XML보다 간결해서 네트워크 트래픽이 줄어듭니다. - ✅ 사람이 읽기 쉬움
→ 초보자도 금방 익힐 수 있어요! - ✅ 자바스크립트와 찰떡궁합
→ JSON은 JS 객체 문법을 그대로 사용하므로, 웹에서 처리하기 쉽습니다. - ✅ 언어 독립적
→ PHP, Python, Java 등 모든 언어에서 쉽게 읽고 쓸 수 있어요.
✅ JSON 기본 구조
JSON은 키(key): 값(value) 쌍으로 이루어진 객체 혹은 배열입니다.
📌 JSON 객체 예제
{
"name": "홍길동",
"age": 30,
"job": "개발자"
}
- name, age, job → 키
- "홍길동", 30, "개발자" → 값
📌 JSON 배열 예제
[
{ "name": "철수", "score": 85 },
{ "name": "영희", "score": 92 },
{ "name": "민수", "score": 78 }
]
→ 학생 목록처럼 여러 개의 객체를 배열로 표현할 수 있습니다.
✅ JSON과 자바스크립트 객체는 다를까?
거의 비슷합니다!
다만 JSON은 반드시 문자열이고,
자바스크립트에서 사용할 땐 JSON.parse()로 변환해줘야 합니다.
📌 예시
var jsonString = '{"name":"홍길동","age":30}';
var obj = JSON.parse(jsonString);
console.log(obj.name); // "홍길동"
반대로, 객체를 JSON 문자열로 만들고 싶다면?
var obj = { name: "홍길동", age: 30 };
var jsonString = JSON.stringify(obj);
✅ 실제 응답 데이터 예시 (API 응답)
[
{ "id": 1, "title": "공지사항", "date": "2025-07-24" },
{ "id": 2, "title": "업데이트 안내", "date": "2025-07-22" }
]
이런 데이터를 $.getJSON()으로 받아오면,
.done(function(data){ ... }) 내부에서 data는 배열 형태의 객체 리스트가 됩니다.
✅ 정리하며
구분 JSON
| 형식 | 텍스트 기반 |
| 구조 | Key-Value 쌍 |
| 용도 | 데이터 저장 및 교환 |
| 특징 | 간결하고 읽기 쉬움, JS와 호환성 우수 |
🔄 서버에 데이터를 보낼 때 JSON을 사용하는 방법 | jQuery AJAX 기초
앞선 글에서 우리는 서버에서 JSON 데이터를 받아오는 방법과,
JSON이 어떤 형식의 데이터인지에 대해 알아봤습니다.
이번 글에서는 반대로, 우리가 작성한 데이터를 서버로 보낼 때
JSON을 어떻게 활용하는지, jQuery의 $.ajax()를 사용한 실제 예제와 함께
초보자도 따라할 수 있게 차근차근 설명해드릴게요.
✅ 왜 JSON으로 데이터를 보내나요?
서버와 클라이언트가 서로 이해할 수 있는 공통된 언어가 필요합니다.
그중 가장 많이 사용되는 포맷이 바로 JSON입니다.
- ✅ 다양한 언어에서 읽고 쓰기 쉬움 (PHP, Python, Node 등)
- ✅ 구조화된 데이터 전송이 가능함
- ✅ 클라이언트(브라우저)에서 JavaScript 객체를 바로 변환 가능
✅ jQuery로 JSON 데이터 보내는 기본 구조
$.ajax({
url: 'submit.php', // 데이터를 보낼 서버 주소
type: 'POST', // POST 방식 전송
data: JSON.stringify({ // JSON으로 변환한 데이터
name: '홍길동',
age: 30,
job: '개발자'
}),
contentType: 'application/json', // 보낼 데이터의 타입
success: function(response) {
console.log('서버 응답:', response);
},
error: function(xhr, status, error) {
console.error('전송 실패:', error);
}
});
✅ 꼭 기억해야 할 핵심 포인트
항목 설명
| data | JSON.stringify()로 직렬화한 데이터 |
| contentType | application/json으로 설정해야 서버가 JSON으로 인식 |
| type | POST 방식 사용 권장 |
| success | 전송 성공 시 실행될 콜백 |
| error | 오류 발생 시 실행될 콜백 |
✅ PHP에서 JSON 데이터 받는 방법 예시 (submit.php)
<?php
// JSON 형식의 원시 데이터 읽기
$rawData = file_get_contents("php://input");
// JSON 문자열 → PHP 배열 변환
$data = json_decode($rawData, true);
// 확인용 출력 (배포 시 삭제!)
print_r($data);
// 예시 응답
echo json_encode(['status' => 'success', 'name' => $data['name']]);
?>
✅ json_decode()로 JSON 데이터를 배열로 바꾸어 사용할 수 있습니다.
✅ 실전 예제 시나리오
“이름과 이메일을 입력받아 서버에 전송하고, 응답 메시지를 알림창으로 보여주자!”
📌 HTML 코드
<input type="text" id="name" placeholder="이름">
<input type="email" id="email" placeholder="이메일">
<button id="submitBtn">제출</button>
📌 jQuery 코드
$('#submitBtn').click(function() {
var name = $('#name').val();
var email = $('#email').val();
$.ajax({
url: 'submit.php',
type: 'POST',
data: JSON.stringify({ name: name, email: email }),
contentType: 'application/json',
success: function(response) {
alert('서버 응답: ' + response);
},
error: function(xhr, status, error) {
alert('오류 발생: ' + error);
}
});
});
✅ 응답을 JSON으로 받고 싶다면?
서버에서도 응답을 JSON으로 보내고,
클라이언트에서 자동으로 처리하려면 dataType: 'json' 옵션을 추가하세요.
$.ajax({
...
dataType: 'json',
success: function(response) {
console.log('이름:', response.name);
}
});
✅ 마무리 요약
구분 설명
| 전송 방식 | $.ajax() 사용 |
| 전송 데이터 | JSON.stringify()로 문자열화 |
| 서버 수신 | file_get_contents("php://input") + json_decode() |
| 응답 처리 | success, error 콜백 |
📝 폼(Form) 데이터를 JSON으로 전송하는 방법과 팁 | jQuery AJAX 실전
웹 개발에서 가장 자주 접하게 되는 기능 중 하나는 **사용자 입력을 받는 폼(form)**입니다.
그런데 단순히 폼 데이터를 전송하는 것보다, JSON 형식으로 가공해서 서버로 보내는 방식이 점점 더 많이 사용되고 있습니다.
이번 글에서는 HTML 폼 데이터를 jQuery를 사용해 JSON 형식으로 변환하고, AJAX로 서버에 전송하는 방법을 실전 예제와 함께 설명드릴게요.
✅ 목표 정리
기본적인 폼 구조:
<form id="userForm">
<input type="text" name="name" placeholder="이름">
<input type="email" name="email" placeholder="이메일">
<input type="tel" name="phone" placeholder="전화번호">
<button type="submit">제출</button>
</form>
이 폼 데이터를 JSON으로 바꿔서 서버에 전송하려면 다음 단계를 따릅니다.
✅ Step 1: jQuery로 폼 데이터 수집
$('#userForm').on('submit', function(e) {
e.preventDefault(); // 폼 기본 제출 막기
// 1. 폼 데이터를 가져와 객체로 변환
const formData = {};
$('#userForm').serializeArray().forEach(function(item) {
formData[item.name] = item.value;
});
// 2. JSON 형식으로 서버에 전송
$.ajax({
url: 'submit.php',
type: 'POST',
data: JSON.stringify(formData),
contentType: 'application/json',
success: function(response) {
alert('서버 응답: ' + response);
},
error: function(xhr, status, error) {
alert('오류 발생: ' + error);
}
});
});
✅ 핵심 포인트 정리
항목 설명
| e.preventDefault() | 페이지 새로고침 없이 폼 전송 차단 |
| serializeArray() | 폼 요소들을 name-value 쌍으로 배열화 |
| JSON 변환 | 수동으로 객체에 key-value 저장 |
| JSON.stringify() | 객체를 문자열(JSON)로 변환 |
| contentType | application/json으로 명시 |
✅ 서버(PHP)에서 받는 코드 (submit.php)
<?php
$raw = file_get_contents("php://input");
$data = json_decode($raw, true);
// 응답 (예: 이름만 응답)
echo json_encode([
'status' => 'success',
'received_name' => $data['name']
]);
?>
✅ 실전 팁
💡 1. 빈 값 체크하기
if (!formData.name || !formData.email) {
alert('이름과 이메일은 필수 입력 항목입니다.');
return;
}
💡 2. 숫자, 이메일 정규식 유효성 검사는 JS에서 선처리
✅ 보너스: 폼 전체를 자동으로 JSON으로 만드는 함수
아래와 같은 유틸 함수도 유용합니다.
function formToJSON(formSelector) {
const obj = {};
$(formSelector).serializeArray().forEach(function(item) {
obj[item.name] = item.value;
});
return obj;
}
사용 예:
const formData = formToJSON('#userForm');
✅ 마무리 요약
단계 설명
| 폼 이벤트 가로채기 | submit 이벤트에서 preventDefault() |
| 데이터 수집 | serializeArray()로 name-value 수집 |
| JSON 변환 | 수동 객체 생성 + JSON.stringify() |
| 전송 | $.ajax()로 서버에 POST 전송 |
⚡ [jQuery + PHP]로 JSON 기반 실시간 사용자 피드백 구현하기
사용자가 폼에 입력하고 전송 버튼을 눌렀을 때,
“제출 완료되었습니다” 같은 메시지를 실시간으로 보여주는 기능,
웹사이트에서 자주 보셨죠?
이번 글에서는 jQuery를 활용해 폼 데이터를 JSON으로 전송하고, PHP에서 처리한 후 실시간 피드백을 표시하는 전 과정을 구현해보겠습니다.
✅ 구현 목표
- 사용자가 폼을 입력 후 제출
- jQuery AJAX로 JSON 데이터를 서버에 전송
- PHP에서 데이터 처리 후 JSON 응답
- 응답 결과를 화면에 실시간 출력
✅ 1단계: HTML 폼 구성
<form id="feedbackForm">
<input type="text" name="username" placeholder="이름">
<input type="email" name="email" placeholder="이메일">
<textarea name="message" placeholder="문의 내용을 입력해주세요"></textarea>
<button type="submit">보내기</button>
</form>
<!-- 피드백 메시지 출력 영역 -->
<div id="responseMessage" style="margin-top: 10px; font-weight: bold;"></div>
✅ 2단계: jQuery로 JSON 전송 + 응답 처리
$('#feedbackForm').on('submit', function(e) {
e.preventDefault(); // 기본 폼 전송 차단
const formData = {};
$('#feedbackForm').serializeArray().forEach(function(item) {
formData[item.name] = item.value;
});
// 로딩 메시지 표시
$('#responseMessage').text('전송 중입니다...');
$.ajax({
url: 'feedback.php',
type: 'POST',
data: JSON.stringify(formData),
contentType: 'application/json',
dataType: 'json',
success: function(response) {
if (response.status === 'success') {
$('#responseMessage').text('감사합니다! 피드백이 전송되었습니다.');
$('#feedbackForm')[0].reset(); // 폼 초기화
} else {
$('#responseMessage').text('오류가 발생했습니다: ' + response.message);
}
},
error: function(xhr, status, error) {
$('#responseMessage').text('서버 오류: ' + error);
}
});
});
✅ 3단계: PHP 서버 처리 (feedback.php)
<?php
header("Content-Type: application/json");
// 1. JSON 입력값 읽기
$input = file_get_contents("php://input");
$data = json_decode($input, true);
// 2. 필수 값 확인
if (!isset($data['username']) || !isset($data['email']) || !isset($data['message'])) {
echo json_encode(['status' => 'error', 'message' => '모든 필드를 입력해주세요.']);
exit;
}
// 3. 예시 처리: DB 저장 또는 이메일 전송 가능 (여기선 생략)
// 4. 응답 전송
echo json_encode(['status' => 'success']);
✅ 실시간 피드백 UX 팁
기능 설명
| $('#responseMessage').text(...) | 메시지를 즉시 보여주기 |
| dataType: 'json' | 응답을 자동으로 객체 처리 |
| reset() | 전송 후 입력값 초기화 |
| 로딩 중 메시지 | "전송 중입니다..." 등으로 사용자 기다림 방지 |
✅ 확장 아이디어
- ✅ 입력값 유효성 검사를 추가해 사용자 실수 방지
- ✅ DB 저장 + 이메일 전송으로 실제 서비스 구현
- ✅ SweetAlert2 같은 라이브러리로 메시지를 더 예쁘게 표시
- ✅ 파일 첨부와 함께 JSON 전송하는 구조로 확장
✅ 마무리 요약
단계 설명
| 1 | 폼 입력값을 수집해 객체 생성 |
| 2 | JSON.stringify()로 JSON 변환 |
| 3 | AJAX로 서버에 전송 |
| 4 | 서버는 php://input으로 JSON 수신 |
| 5 | JSON 응답 결과를 실시간으로 화면에 표시 |
📋 jQuery + PHP + MySQL로 피드백 리스트 출력하기
실제 서비스에서는 사용자가 남긴 피드백을 **데이터베이스(MySQL)**에 저장하고,
관리자나 운영자가 이를 확인할 수 있어야 합니다.
이번 글에서는 다음 내용을 단계별로 구현해보겠습니다:
✅ 사용자의 피드백을 MySQL에 저장
✅ 저장된 피드백을 PHP로 불러오기
✅ jQuery AJAX를 이용해 화면에 실시간으로 출력
✅ 1단계: MySQL 테이블 만들기
CREATE TABLE feedback (
id INT AUTO_INCREMENT PRIMARY KEY,
username VARCHAR(100),
email VARCHAR(100),
message TEXT,
created_at DATETIME DEFAULT CURRENT_TIMESTAMP
);
- 사용자의 이름, 이메일, 메시지를 저장합니다.
- created_at 컬럼은 자동으로 입력 시간을 기록합니다.
✅ 2단계: 피드백 저장 기능 개선 (PHP feedback.php 수정)
<?php
header("Content-Type: application/json");
$pdo = new PDO("mysql:host=localhost;dbname=your_db;charset=utf8", "db_user", "db_pass");
$input = file_get_contents("php://input");
$data = json_decode($input, true);
if (!isset($data['username'], $data['email'], $data['message'])) {
echo json_encode(['status' => 'error', 'message' => '모든 항목을 입력해주세요.']);
exit;
}
// DB에 저장
$sql = "INSERT INTO feedback (username, email, message) VALUES (:username, :email, :message)";
$stmt = $pdo->prepare($sql);
$stmt->execute([
':username' => $data['username'],
':email' => $data['email'],
':message' => $data['message']
]);
echo json_encode(['status' => 'success']);
✅ 3단계: 피드백 목록을 불러오는 PHP 파일 만들기 (get_feedback.php)
<?php
header("Content-Type: application/json");
$pdo = new PDO("mysql:host=localhost;dbname=your_db;charset=utf8", "db_user", "db_pass");
$stmt = $pdo->query("SELECT username, message, created_at FROM feedback ORDER BY id DESC");
$feedbackList = $stmt->fetchAll(PDO::FETCH_ASSOC);
echo json_encode($feedbackList);
✅ 4단계: jQuery로 피드백 목록 출력
HTML 구조:
<h3>📬 사용자 피드백 목록</h3>
<div id="feedbackList" style="margin-top: 20px;"></div>
jQuery 코드:
function loadFeedbackList() {
$.getJSON('get_feedback.php', function(data) {
let html = '';
if (data.length === 0) {
html = '<p>아직 등록된 피드백이 없습니다.</p>';
} else {
html = '<ul class="list-group">';
data.forEach(function(item) {
html += `
<li class="list-group-item">
<strong>${item.username}</strong> (${item.created_at})<br>
${item.message}
</li>
`;
});
html += '</ul>';
}
$('#feedbackList').html(html);
});
}
// 페이지 로딩 시 피드백 목록 불러오기
$(document).ready(function() {
loadFeedbackList();
});
✅ 새 피드백 전송 후 자동 갱신
이전 글에서 작성했던 $('#feedbackForm').submit() 안에 아래 코드만 추가하면
전송 완료 후 목록을 자동으로 갱신할 수 있어요.
success: function(response) {
if (response.status === 'success') {
$('#responseMessage').text('감사합니다! 피드백이 등록되었습니다.');
$('#feedbackForm')[0].reset();
loadFeedbackList(); // ← 새로고침 없이 자동 목록 갱신
}
}
✅ 마무리 요약
기능 사용된 기술
| 피드백 저장 | PHP + MySQL + PDO |
| 데이터 출력 | PHP JSON 응답 + jQuery |
| 실시간 갱신 | AJAX로 동적 처리 |
다음 글 예고
이번에는 피드백을 등록하고 조회하는 기능까지 완성했습니다.
다음 글에서는 관리자가 피드백을 삭제하거나 응답을 달 수 있는 기능도 구현해볼 거예요.
다음 글: [PHP + jQuery로 피드백 삭제 및 관리자 응답 기능 만들기]
댓글로 궁금한 점을 남겨주세요.
이 시리즈를 통해 실제 서비스 수준의 기능을 손쉽게 구현해볼 수 있습니다
필요하시면 다음 글(피드백 삭제 + 응답 기능)도 바로 이어서 작성해드릴게요.
'IT tech Coding > jquery' 카테고리의 다른 글
| jQuery .html() vs .load() 차이점과 사용법 (with 실전 예제) (0) | 2025.06.25 |
|---|---|
| 부드러운 스크롤 이동, jQuery로 쉽게 구현하기 (0) | 2025.02.19 |
| 제이쿼리 DataTables 사용법: 초보자를 위한 상세 가이드 (0) | 2025.02.11 |
| 대량 데이터도 빠르게! DataTables 서버사이드 처리와 모듈화로 최적화하기 (0) | 2024.12.21 |
| HTML 폼 요소에 Readonly 효과 적용하기: jQuery를 활용한 코드 작성법 (0) | 2024.11.24 |
