📌 JSP 요청 처리와 JavaScript 연동 완벽 정리 (GET, POST, Request)

My Pale Blue Dot·2025년 4월 1일

GET Javascrpit POST Request jsp

JSP/SERVLET

목록 보기

2/25

📅 날짜

2025-04-01

📝 학습 내용

✅ 개념 1: 요청 방식(GET/POST) 개요

HTML에서 사용자가 입력한 데이터를 서버(JSP)로 전송할 때, form 태그를 사용
form 태그의 method 속성에 따라 데이터를 전달하는 방식이 달라짐

방식	특징	데이터 전송 위치	보안성	용도
GET	기본 방식	URL에 쿼리스트링	낮음	조회
POST	보안 고려	HTTP Body	높음	로그인, 등록

✅ 개념 2: JSP에서 사용자 입력 데이터 처리

request.getParameter("name")을 사용해 HTML form에서 넘어온 데이터를 받음
POST 방식일 경우, 한글 깨짐 방지를 위해 request.setCharacterEncoding("UTF-8")을 먼저 호출해야 함

✅ 개념 3: JavaScript와 JSP 연동

JSP → JavaScript: JSP 변수 값을 JS 변수로 전달
JavaScript → JSP: JS에서 JSP로 URL 쿼리스트링 방식으로 값 전달 가능

1️⃣ HTML → JSP 요청 흐름 (GET 방식)

📄 `01Request_Get.html` (사용자 입력 → JSP 전송)

<form action="./01Request_Process.jsp" method="get">
  <!-- 사용자로부터 username, password, 색상 정보를 입력받음 -->
  <input type="text" name="username" /><br/>
  <input type="text" name="password"/><br/>
  <input type="text" name="bgcolor"/><br/>
  <button>전송</button>
</form>

➡️ 사용자가 버튼을 누르면 입력값들이 URL에 쿼리스트링으로 포함되어

01Request_Process.jsp 파일로 전송됨.

📄 `01Request_Process.jsp` (데이터 수신 후 출력)

<%
  // URL을 통해 전달된 데이터를 JSP에서 받아옴
  String username = request.getParameter("username");
  String password = request.getParameter("password");
  String bgcolor = request.getParameter("bgcolor");
%>

<!-- 받은 정보를 HTML로 출력 -->
<body style="background-color: <%= bgcolor %>">
  <h2>안녕하세요, <%= username %>님!</h2>
  <p>당신의 비밀번호는 <%= password %> 입니다.</p>
</body>

🔁 흐름 요약

사용자가 HTML form에 입력
"전송" 클릭 시 GET 방식으로 데이터 전송
JSP에서 request.getParameter()로 값 받아 출력
배경색은 bgcolor 값을 사용하여 바뀜

2️⃣ HTML → JSP 요청 흐름 (POST 방식)

📄 `02Request_Post.html`

<form action="./02Request_Process.jsp" method="post">
  <!-- 사용자로부터 데이터를 입력받음 (POST 방식은 URL에 표시 안됨) -->
  <input type="text" name="username" /><br/>
  <input type="text" name="password"/><br/>
  <input type="text" name="bgcolor"/><br/>
  <button>전송</button>
</form>

📄 `02Request_Process.jsp`

<%
  // POST 방식은 한글 깨짐을 막기 위해 인코딩 처리 필수
  request.setCharacterEncoding("UTF-8");

  // 전달된 파라미터 값을 받음
  String username = request.getParameter("username");
  String password = request.getParameter("password");
  String bgcolor = request.getParameter("bgcolor");
%>

<body style="background-color: <%= bgcolor %>">
  <h2>POST 방식: <%= username %>님 환영합니다!</h2>
  <p>비밀번호는 <%= password %> 입니다.</p>
</body>

3️⃣ JSP → JavaScript 값 전달

📄 `03JSP_TO_JS.jsp`

<%
  String username = request.getParameter("username");
%>

<script>
  // JSP에서 전달받은 값을 JS 변수에 넣기
  let user = "<%= username %>";
  alert("JS에서 받은 사용자 이름: " + user);
</script>

4️⃣ JavaScript → JSP 값 전달

📄 `04JS_TO_JSP.jsp`

<!-- JS에서 URL로 쿼리스트링을 붙여 JSP로 데이터 전송 -->
<button onclick="location.href='04JS_TO_JSP.jsp?user=admin'">JSP로 전송</button>

📄 JSP에서 받는 쪽

<%
  String user = request.getParameter("user");
%>
<p>전달된 사용자: <%= user %></p>

5️⃣ 실습 예제: 구구단 출력 (사용자 입력 기반)

✅ HTML + JSP 통합 예제

<form method="get">
  단: <input type="number" name="dan" min="1" max="9" required>
  <input type="submit" value="구구단 출력">
</form>

<%
  // 파라미터 수신
  String danStr = request.getParameter("dan");

  // 값이 있을 때만 처리
  if (danStr != null) {
    try {
      int dan = Integer.parseInt(danStr);
%>
      <h3><%= dan %>단 출력</h3>
      <table border="1" cellpadding="10">
        <tbody>
          <% for (int i = 1; i <= 9; i++) { %>
            <tr>
              <td><%= dan %> x <%= i %> = <%= dan * i %></td>
            </tr>
          <% } %>
        </tbody>
      </table>
<%
    } catch (NumberFormatException e) {
%>
      <p style="color:red;">숫자만 입력하세요!</p>
<%
    }
  }
%>

🔹 출력 예시 (단: 5)

5단 출력

5 x 1 = 5

5 x 2 = 10

5 x 3 = 15

5 x 4 = 20

5 x 5 = 25

5 x 6 = 30

5 x 7 = 35

5 x 8 = 40

5 x 9 = 45

🔥 정리 요약

항목	내용
요청 처리	`request.getParameter("name")`로 값 수신
인코딩 처리	POST 방식에서는 `request.setCharacterEncoding("UTF-8")` 필수
GET vs POST	GET은 URL 노출 / POST는 보안 고려
JSP ↔ JS 연동	`<%= 값 %>`로 JSP 데이터를 JS에 넘길 수 있음
데이터 흐름	HTML → JSP, JSP → JS, JS → JSP까지 가능

🔗 참고 자료

W3Schools - JSP Syntax
실습 파일: 01Request_Get.html, 02Request_Post.html, JSP_TO_JS.jsp 등

느낀 점

단순히 폼에서 값을 넘기고 출력하는 수준을 넘어서,

"데이터가 어떻게 흐르고, 어디에서 처리되고 출력되는지"를 명확히 이해하게 되었다.

앞으로는 이 기반 위에 세션, 쿠키, MVC 구조도 자연스럽게 연결될 수 있을 것 같다.

요약 (Summary)

JSP 요청 흐름은 폼 입력 → JSP 처리 → HTML 출력
각 단계의 코드 흐름과 역할을 정확히 이해하는 것이 핵심
이제는 입력/출력/전달/처리의 구조가 보인다!

My Pale Blue Dot

Here, My Pale Blue.🌏

이전 포스트

📌 JSP와 Servlet의 개념 및 차이점 정리

다음 포스트

📌 JSP 요청 처리와 JavaScript 연동 완벽 정리 (GET, POST, Request)

JSP/SERVLET

📅 날짜

📝 학습 내용

✅ 개념 1: 요청 방식(GET/POST) 개요

✅ 개념 2: JSP에서 사용자 입력 데이터 처리

✅ 개념 3: JavaScript와 JSP 연동

1️⃣ HTML → JSP 요청 흐름 (GET 방식)

📄 `01Request_Get.html` (사용자 입력 → JSP 전송)

📄 `01Request_Process.jsp` (데이터 수신 후 출력)

🔁 흐름 요약

2️⃣ HTML → JSP 요청 흐름 (POST 방식)

📄 `02Request_Post.html`

📄 `02Request_Process.jsp`

3️⃣ JSP → JavaScript 값 전달

📄 `03JSP_TO_JS.jsp`

4️⃣ JavaScript → JSP 값 전달

📄 `04JS_TO_JSP.jsp`

📄 JSP에서 받는 쪽

5️⃣ 실습 예제: 구구단 출력 (사용자 입력 기반)

✅ HTML + JSP 통합 예제

🔹 출력 예시 (단: 5)

🔥 정리 요약

🔗 참고 자료

느낀 점

요약 (Summary)

📌 JSP와 Servlet의 개념 및 차이점 정리

📌 JSP 실습: page 지시어 개념과 DTO 연동, 에러 처리 흐름 정리

0개의 댓글

📌 JSP 요청 처리와 JavaScript 연동 완벽 정리 (GET, POST, Request)

JSP/SERVLET

📅 날짜

📝 학습 내용

✅ 개념 1: 요청 방식(GET/POST) 개요

✅ 개념 2: JSP에서 사용자 입력 데이터 처리

✅ 개념 3: JavaScript와 JSP 연동

1️⃣ HTML → JSP 요청 흐름 (GET 방식)

📄 01Request_Get.html (사용자 입력 → JSP 전송)

📄 01Request_Process.jsp (데이터 수신 후 출력)

🔁 흐름 요약

2️⃣ HTML → JSP 요청 흐름 (POST 방식)

📄 02Request_Post.html

📄 02Request_Process.jsp

3️⃣ JSP → JavaScript 값 전달

📄 03JSP_TO_JS.jsp

4️⃣ JavaScript → JSP 값 전달

📄 04JS_TO_JSP.jsp

📄 JSP에서 받는 쪽

5️⃣ 실습 예제: 구구단 출력 (사용자 입력 기반)

✅ HTML + JSP 통합 예제

🔹 출력 예시 (단: 5)

🔥 정리 요약

🔗 참고 자료

느낀 점

요약 (Summary)

📌 JSP와 Servlet의 개념 및 차이점 정리

📌 JSP 실습: page 지시어 개념과 DTO 연동, 에러 처리 흐름 정리

0개의 댓글

📄 `01Request_Get.html` (사용자 입력 → JSP 전송)

📄 `01Request_Process.jsp` (데이터 수신 후 출력)

📄 `02Request_Post.html`

📄 `02Request_Process.jsp`

📄 `03JSP_TO_JS.jsp`

📄 `04JS_TO_JSP.jsp`