[JSP] Form

Form tag

- 데이터를 실어서 서버로 요청을 보낼 수 있는 태그

- form 내부의 input 태그들에 들어있는 값들을 서버로 보내게 된다.

- 실어보낸 데이터는 서버측의 request 객체에서 확인할 수 있다.

- 데이터는 Key-Value 방식으로 전송된다.

- input 태그의 name 속성 값이 Key 역할을 한다.

- input 태그의 value 속성 값이 Value 역할을 한다.

 

다른 JSP 파일로 데이터와 함께 요청 보내보기

- action 속성: 요청을 보낼 URL을 적는 속성.  (해당 form태그 내부에서 submit이 발생했을 때 요청을 보낸다.)

	<form action="http://localhost:8090/chap02/form/order.jsp">
                <select name="drink">
                        <option value="Americano">아메리카노</option>
                        <option value="GreenTea">녹차</option>
                        <option value="RedTea">홍차</option>
                        <option value="Water">물</option>
                </select>
                <!-- 하나의 name에 여러 value를 보내는 경우도 존재한다. (ex: checkbox) -->
                <div>
                        <input type="checkbox" id="op1" name="drink-option" value="ice"/>
                        <label for="op1">얼음 많이</label> <br>
                        <input type="checkbox" id="op2" name="drink-option" value="syrup"/>
                        <label for="op2">시럽 추가</label> <br>
                        <input type="checkbox" id="op3" name="drink-option" value="shot"/>
                        <label for="op3">샷 추가</label> <br>
                </div>
                <input type="number" name="qty" value="3"/>
                <input type="submit" /> <!-- 전송 버튼 -->
        </form>

 

Servlet으로 데이터와 함께 요청 보내보기

 	<form action="http://localhost:8090/chap02/form/order">
                <select name="drink">
                        <option value="Americano">아메리카노</option>
                        <option value="GreenTea">녹차</option>
                        <option value="RedTea">홍차</option>
                        <option value="Water">물</option>
                </select>
                <!-- 하나의 name에 여러 value를 보내는 경우도 존재한다. (ex: checkbox) -->
                <div>
                        <input type="checkbox" id="op1" name="drink-option" value="ice"/>
                        <label for="op1">얼음 많이</label> <br>
                        <input type="checkbox" id="op2" name="drink-option" value="syrup"/>
                        <label for="op2">시럽 추가</label> <br>
                        <input type="checkbox" id="op3" name="drink-option" value="shot"/>
                        <label for="op3">샷 추가</label> <br>
                </div>
                <input type="number" name="qty" value="3"/>
                <input type="submit" /> <!-- 전송 버튼 -->
        </form>

package chap02.servlet;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/form/order")
public class OrderServlet extends HttpServlet {
        
        // doGet() : 이 서블릿에 도착한 GET 방식 요청만 처리한다. (select)
        @Override
        protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
                System.out.println("여기는 doGet입니다. 수량: " + req.getParameter("qty"));
        }
        
        // doPost() : 이 서블릿에 도착한 POST 방식 요청만 처리한다. (insert)
        @Override
        protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
                System.out.println("여기는 doPost입니다. 수량: " + req.getParameter("qty"));
        }
        
        // service() : 요청이 도착하면 방식과 관계없이 일단 먼저 처리하는 곳
        @Override
        protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
                
                // 서블릿에서는 파라미터를 HttpServletRequest 인스턴스에서 꺼낼 수 있다.
                // (※ .jsp 파일에서는 해당 인스턴스명이 request로 만들어져 있음)
                
                String qty = req.getParameter("qty");
                
                System.out.println("주문 수량은 " + qty + "개 입니다.");
                
                // 부모 클래스의 service()의 기본 동작을 통해
                // 알맞은 doMethod()로 보낼 수 있다.
                super.service(req, resp);
        }
}

 

GET method와 POST method

- form의 method 속성을 설정하지 않을 시 기본 동작은 GET이다.

- GET 방식으로 form 요청을 보내면 데이터가 다음과 같이 주소창에 보이면서 전송된다. (uri?key=value&key-value&...)

- GET 방식은 주소창에 보이기 대문에 비밀번확 타은 민감한 정보가 포함된 데이터를 보내기에는 적합하지 않다.

- POST 방식은 주소창에 데이터가 노출되지 않고 전송된다.

- POST 방식 전송 시 데이터는 request의 body라는 부분에 포함되어 전송된다.

 

POST 방식으로 데이터 보내기

<!-- 현재 (index.jsp) /cha02/form/index.jsp이기 때문에 ./order 상대경로를 사용하면 /chap02/form/order로 가게된다. -->
        <form action="./order" method="POST">
                <!-- input type hidden : 눈에 보이지는 않지만 데이터는 전송된다.  -->
                <input type="hidden" name="qty" value="123"/>
                <input type="submit" value="POST 요청 보내기" />
        </form>

 

GET 방식으로 데이터 보내기

        <!-- GET 방식 요청은 URL 뒤에 직접 파라미터를 입력하는 것도 가능하다. -->
        <a href="./order?qty=999">GET 방식 요청 보내기</a>