Form tag

콜라맘·2023년 6월 15일

Java jsp servlet

JSP

목록 보기

5/17

🏁 Form tag

데이터를 실어서 서버로 요청을 보낼 수 있는 태그
form 내부의 input 태그들에 들어있는 값들을 서버로 보내게 된다
실어 보낸 데이터는 서버측의 request 객체에서 확인할 수 있다
데이터는 Key-Value 방식으로 전송된다
input 태그의 name 속성 값이 Key, value 속성 값이 value 역할을 한다
action 속성 : 요청을 보낼 url을 적는 속성, 해당 form 태그 내부에서 submit이 발생했을 때 요청을 보낸다
하나의 name에 여러 value를 보내는 경우도 존재한다(ex: checkbox)
전송 버튼 : 누르면 action에 설정한 주소로 전송된다

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

form 태그로 전송 받은 데이터를 request 객체에서 꺼낼 수 있다
파라미터는 무조건 문자열 타입으로 꺼내지므로 주의해야 한다
checkbox 처럼 하나의 name에 값이 여러개인 경우 getParameter() 대신 getParameterValues()를 사용해 받을 수 있다

💬 코드 >>

✔ index.jsp (현재 파일 : 클라이언트의 데이터를 form으로 입력받는 곳)

	<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>
		<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>

✔ order.jsp (다른 jsp파일 : 현재 파일에서 form을 통해 받은 데이터를 요청과 함께 받는다)

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
    
<% 
	String drink = request.getParameter("drink");
	String qty = request.getParameter("qty");
	String[] drinkOptions = request.getParameterValues("drink-option"); // 값이 여러개인 경우
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>주문 확인 페이지</title>
</head>
<body>
	<h1>주문 확인</h1>
	
	<p><%=drink %> x <%=qty %></p><br>
	선택한 옵션 : 
	<%
		// 아무 것도 선택을 안하는 경우 null 값이 들어오므로 
		// null 체크를 하지 않고 사용하면 에러가 날 수 있다 
		if(drinkOptions != null){ // drinkOptions가 null일 경우에 대한 처리
			for(String drinkOption : drinkOptions){
				out.print(drinkOption + ", ");
			}
		}
	%>
</body>
</html>

📺 실행화면 >>

✅ submit을 누르면 >>

❗ submit을 누르면 form의 action속성에 적은 url뒤에 얹혀서 전송된다

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

💬 코드 >>

✔ jsp >>

<h3># Servlet으로 데이터와 함께 요청 보내보기</h3>
	<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>
		<div>
			<input type="checkbox" id="sop1" name="drink-option" value="ice"/>
			<label for="sop1">얼음 많이</label> <br>
			<input type="checkbox" id="sop2" name="drink-option" value="syrup"/>
			<label for="sop2">시럽 추가</label> <br>
			<input type="checkbox" id="sop3" name="drink-option" value="shot"/>
			<label for="sop3">샷 추가</label> <br>
		</div>
		<input type="number" name="qty" value="3" />
		<input type="submit" />
	</form>

✔ java(서블릿) >>

import java.io.IOException;
import java.util.Arrays;

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{

	@Override
	protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		// 서블릿에서는 파라미터를 HttpServletRequest 인스턴스에서 꺼낼 수 있다
		// (※ .jsp 파일에서는 해당 인스턴스 명이 request로 만들어져 있음)
		// jsp는 1차로 서블릿형태로 변환되기 때문에 request를 따로 만들지 않고도 사용 가능하다
		
		String name = req.getParameter("drink");
		String qty = req.getParameter("qty");
		String[] ops = req.getParameterValues("drink-option");

		System.out.println("주문한 메뉴 " + name);
		System.out.println("추가 옵션 " + Arrays.toString(ops));		
		System.out.println("주문 수량은 " + qty + "개 입니다.");
	}
}