JavaScript) 데이터를 받아 처리하는 방법 / FormData와 fetch() 활용 방법 / GET과 POST 차이

1. HTML <form>을 이용한 데이터 전송

: 기본 폼 제출 방식

<form action="indexTwo.jsp" method="GET"> <!-- method="POST"도 가능 -->
    name:<input type="text" name="name" size="20" placeholder="이름"/><br/>
    age:<input type="text" name="age" size="20" placeholder="연령"/><br/>
    <input type="submit" value="index Two로 이동">
</form>

: 사용자가 입력한 이름(name)과 나이(age) 데이터를 indexTwo.jsp로 전송

: <input> 요소의 name 속성값이 name="name", name="age"로 지정되어 있어 서버에서 데이터를 받을 수 있다.

: submit 버튼을 누르면 GET 방식(기본값)으로 데이터가 URL에 포함되어 전달

 

ex)

사용자가 홍길동 / 25 입력 후 버튼 클릭 → indexTwo.jsp?name=홍길동&age=25

: get방식을 쓰면 url에 넘어가는 값이 보여짐(보여주지 않기 위해선 post방식 사용)

---

2. JavaScript를 이용한 동적 페이지 이동

: location.href를 이용한 GET 방식 데이터 전송

name:<input type="text" id="name" size="20" placeholder="이름"/><br/>
age:<input type="text" id="age" size="20" placeholder="연령"/><br/>
<button type="button" onclick="goPage()">index Two로 이동</button>

<script type="text/javascript">
    const goPage = () => {
        let name = document.getElementById("name").value;
        let age = document.getElementById("age").value;
        
        if (name.trim() === "") {
            alert("이름을 입력해 주세요!");
            return;
        }

        location.href = `./indexTwo.jsp?name=${encodeURIComponent(name)}&age=${encodeURIComponent(age)}`;
    }
</script>

: location.href를 사용하여 JavaScript에서 URL을 변경하고 페이지를 이동

: 사용자가 입력한 값을 encodeURIComponent()를 사용하여 URL 인코딩 후 전달

: 입력 값이 없을 경우 alert()을 이용해 경고 메시지를 띄움

---

3. JSP에서 폼 데이터 받기

: request.getParameter()로 GET 데이터 받기

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%
    String name = request.getParameter("name");
    String sAge = request.getParameter("age");
    
    int age = 0;
    try {
        age = Integer.parseInt(sAge);
    } catch (NumberFormatException e) {
        age = -1;
    }


    System.out.println("name: " + name);
    System.out.println("age: " + age);
%>

: request.getParameter("name")를 사용하여 GET 요청으로 전달된 데이터를 가져옵니다.

: 문자열로 전달된 age 값을 Integer.parseInt(sAge)를 사용해 정수로 변환

: 만약 age가 숫자가 아닐 경우 NumberFormatException이 발생할 수 있으므로 예외 처리가 필요

---

FormData와 fetch()를 활용한 방식 (요즘? 방식)

: POST 방식 사용

<form id="userForm">
    name:<input type="text" id="name" name="name" size="20" placeholder="이름"/><br/>
    age:<input type="text" id="age" name="age" size="20" placeholder="연령"/><br/>
    <button type="button" onclick="submitForm()">index Two로 이동</button>
</form>

<script>
const submitForm = () => {
    let formData = new FormData(document.getElementById("userForm"));

    fetch("indexTwo.jsp", {
        method: "POST",
        body: formData
    }).then(response => response.text())
      .then(data => console.log("서버 응답:", data))
      .catch(error => console.error("에러 발생:", error));
};
</script>

: fetch()를 사용하면 페이지 이동 없이 AJAX 방식으로 데이터를 서버에 전송할 수 있다.

: FormData 객체를 이용하여 POST 요청으로 데이터를 서버에 보낼 수 있다.

: 서버(indexTwo.jsp)에서 request.getParameter("name"), request.getParameter("age")를 이용하여 데이터를 받을 수 있다.

---

마무리

방법	특징
<form> 태그 사용	전통적인 방식, 페이지 이동 발생
location.href 사용	JavaScript로 URL을 변경하여 이동, URL 인코딩 필요
fetch() 사용	AJAX 요청을 통해 페이지 이동 없이 서버와 통신 가능

: 웹 개발에서는 fetch()를 활용한 비동기 요청이 일반적

: 전통적인 <form> 방식은 간단한 데이터 전송 시 유용

GET vs POST 차이점

비교 항목	GET	POST
데이터 전송 방식	URL 쿼리 문자열	HTTP 요청의 본문(body)
보안	낮음 (URL 노출)	상대적으로 높음
전송 데이터 크기	제한 있음 (URL 길이 제한)	제한 없음
페이지 이동 여부	새로고침 발생	새로고침 발생

<form> vs fetch() 언제 사용?

방법	특징	추천 상황
<form method="post">	페이지 새로고침 발생, 간단한 구현	로그인, 회원가입, 기본 폼 전송
fetch()	새로고침 X, 페이지 이동 없이 서버 요청 가능	실시간 검색, SPA(싱글 페이지 애플리케이션)

: 단순한 폼 전송이라면 <form method="post">를 사용하면 되고,

: AJAX 요청이나 비동기 통신이 필요할 경우에는 fetch()가 더 적합

 

: 기본적인 GET/POST 요청 (form 사용)은 새로고침이 발생

: fetch()를 사용하면 새로고침 없이 데이터만 서버로 전송 가능

: 비동기 통신을 통해 페이지 이동 없이 서버 응답을 받을 수 있어 사용자 경험(UX)이 향상