1. 제목
Ajax POST 요청 예제 - 사용자가 입력한 데이터 서버에 전송하기
2. 준비 사항
- HTML 파일 작성 환경: 메모장이나 Visual Studio Code 등 텍스트 편집기.
- 인터넷 연결: jsonplaceholder.typicode.com에서 데이터를 전송해볼 것이므로 필요합니다.
- 브라우저: HTML 파일을 실행할 브라우저 (Chrome, Firefox 등).
3. 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajax POST 요청 예제</title>
</head>
<body>
<h1>Ajax POST 요청 테스트 - 사용자 데이터 전송</h1>
<form id="postDataForm">
<label for="title">제목:</label>
<input type="text" id="title" name="title"><br><br>
<label for="body">내용:</label>
<textarea id="body" name="body"></textarea><br><br>
<button type="button" id="sendDataButton">데이터 전송하기</button>
</form>
<div id="result"></div>
<script>
document.getElementById('sendDataButton').addEventListener('click', function() {
// 사용자 입력값 가져오기
const title = document.getElementById('title').value;
const body = document.getElementById('body').value;
// Ajax 요청 객체 생성
const xhr = new XMLHttpRequest();
xhr.open('POST', 'https://jsonplaceholder.typicode.com/posts', true);
xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
// 응답을 받았을 때 실행할 콜백 함수 정의
xhr.onload = function() {
if (xhr.status === 201) { // 201: Created
const responseData = JSON.parse(xhr.responseText);
document.getElementById('result').innerHTML = `
<h3>서버 응답:</h3>
<p>ID: ${responseData.id}</p>
<p>제목: ${responseData.title}</p>
<p>내용: ${responseData.body}</p>
`;
} else {
document.getElementById('result').innerText = '데이터 전송에 실패했습니다.';
}
};
// JSON 형식으로 데이터를 전송
const data = JSON.stringify({ title: title, body: body });
xhr.send(data);
});
</script>
</body>
</html>
4. 주요 기능 설명 및 흐름
- 버튼 클릭 이벤트: 사용자가 데이터 전송하기 버튼을 클릭하면 addEventListener를 통해 Ajax POST 요청이 실행됩니다.
- Ajax 요청 생성 및 전송: XMLHttpRequest 객체의 open()과 send() 메서드를 통해 POST 요청이 생성되고 전송됩니다. Content-Type을 application/json으로 설정하여 JSON 형식으로 서버에 데이터를 보냅니다.
- 서버 응답 처리:
- 서버에서 응답을 받으면 JSON 형식으로 파싱하여 ID, title, body 데이터를 result 영역에 표시합니다.
- 전송이 성공적일 경우 상태 코드 201이 반환되며, 실패하면 오류 메시지를 표시합니다.
5. 결과 미리보기
실행 후, 제목과 내용을 입력하고 데이터 전송하기 버튼을 클릭하면, 서버로 입력된 데이터가 전송되고 결과가 다음과 같이 표시됩니다.
- 서버 응답이 성공적일 때:
서버 응답:
ID: 101
제목: (입력한 제목)
내용: (입력한 내용)
6. 추가 팁 및 주의사항
- 테스트용 데이터 전송: JSONPlaceholder API는 테스트 용도이므로 실제 데이터베이스에 기록되지 않지만, 응답은 정상적으로 돌아옵니다.
- 보안: 실제 서비스에서는 사용자 데이터 보호를 위해 HTTPS를 사용하고, 추가 인증 및 권한 검사를 구현해야 합니다.
- 오류 처리: 네트워크 오류나 서버 오류를 대비해 onerror 이벤트 핸들러를 추가하여 사용자에게 적절한 메시지를 제공할 수 있습니다.
- 데이터 유효성 검사: 사용자가 입력한 데이터가 유효한지 검사하는 로직을 추가하여 서버로 불필요한 요청을 보내는 것을 방지할 수 있습니다.
'HTML 예제' 카테고리의 다른 글
| 초보자를 위한 간단한 Ajax GET 요청 가이드 (0) | 2024.11.08 |
|---|---|
| 버튼 누르면 팝업창 뜨기 (0) | 2023.12.08 |
| 미션 클리어 카운터 (0) | 2023.12.08 |
| 실시간 주식 시세 (0) | 2023.12.08 |
| 웹사이트 소개 페이지 (0) | 2023.12.08 |
