자바스크립트로 폼 데이터 처리 및 AJAX 요청 예제

폼 입력 및 AJAX 요청

웹 애플리케이션에서 사용자 입력을 받고 서버와 비동기적으로 통신하여 데이터를 처리하는 방법을 알아봅니다. 이 예제에서는 HTML 폼을 만들고 자바로 작성된 서블릿을 사용하여 폼 데이터를 처리하고 응답을 반환하는 방법을 다룹니다.

HTML 폼 작성

HTML 폼을 사용하여 사용자로부터 이름과 이메일을 입력받습니다. 폼에는 제출 버튼이 있으며, 이 버튼을 클릭하면 자바스크립트를 사용하여 폼 데이터를 서버로 전송합니다.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form 및 AJAX 예제</title>
</head>
<body>

<h2>폼 입력</h2>
<form id="myForm">
  <label for="name">이름:</label>
  <input type="text" id="name" name="name"><br><br>
  <label for="email">이메일:</label>
  <input type="email" id="email" name="email"><br><br>
  <button type="button" onclick="submitForm()">제출</button>
</form>

<div id="result"></div>

<script>
  function submitForm() {
    var xhr = new XMLHttpRequest();
    var formData = new FormData(document.getElementById("myForm"));
    xhr.open("POST", "FormHandlerServlet", true);
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4 && xhr.status === 200) {
        document.getElementById("result").innerHTML = xhr.responseText;
      }
    };
    xhr.send(formData);
  }
</script>

</body>
</html>

자바로 작성된 서블릿

자바로 작성된 서블릿은 폼 데이터를 받아와 처리한 후 응답을 반환합니다. 이 서블릿은 웹 애플리케이션 서버에 배치되어야 하며, HTTP POST 요청을 수신하여 폼 데이터를 추출하고 처리합니다.

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class FormHandlerServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String name = request.getParameter("name");
        String email = request.getParameter("email");

        // 받은 데이터를 처리하는 코드 (예: 데이터베이스에 저장)
        // 여기서는 간단히 콘솔에 출력
        System.out.println("이름: " + name);
        System.out.println("이메일: " + email);

        // 응답 보내기
        response.setContentType("text/html");
        response.setCharacterEncoding("UTF-8");
        response.getWriter().write("폼이 제출되었습니다. 데이터를 성공적으로 받았습니다.");
    }
}

AJAX 요청

자바스크립트를 사용하여 AJAX 요청을 생성하고, 이를 통해 서버로 폼 데이터를 비동기적으로 전송합니다. AJAX 요청은 사용자가 제출 버튼을 클릭할 때 발생하며, 서버로부터 응답이 도착하면 페이지를 다시 로드하지 않고도 동적으로 결과를 표시합니다. 이와 같이 자바를 사용한 폼 데이터 처리 및 AJAX 요청문을 개발할 수 있을 것입니다.

'개발지식' 카테고리의 다른 글

오라클 프로시저에서 FOR 루프 활용하기: 예제와 설명 (0)	2024.02.08
자바 스프링 기초 설정: 초보자를 위한 안내서 (0)	2024.02.08
오라클 데이터베이스 조인의 종류 및 예제 (1)	2024.02.08
자바스크립트의 필터(Filter)와 맵(Map) 함수 (0)	2024.02.06
파이썬 변수의 역할과 데이터 타입 소개 (0)	2024.02.05