[JSP] form 태그로 데이터 주고받기 (getParameter)

 

 

---

FORM 으로 데이터를 주고, getParameter 로 데이터 받기

---

 

 

0. JSP 란?

---

JSP는 Java Server Page 의 약자로, HTML 코드에 JAVA 코드를 넣어 동적 웹페이지를 생성하는 웹 어플리케이션 도구다. (언어아니다.) 웹 페이지 내부에 프로그래밍적인 요소를 추가하거나 서버에서 계산되고 실행된 결과를 웹페이지에 표시하고자 할 때 사용한다. 쉽게 말해  '웹페이지 HTML 중간에 자바 프로그래밍 코드 좀 쓰겠습니다.' 의 의미다.

 

JSP 명령은 html 태그와 함께 파일로 저장되어 서버에 보관된다. 클라이언트의 요청을 받으면 해당 파일(~.jsp)이 클라이언트로 전송되어 웹브라우저에 표시가 되는데, 웹 브라우저에 표시되기 이전에 JSP 명령은 이미 실행되어 '결과만' html 태그와 함께 전송되어진다. 페에지 검사(f12)를 눌러도 jsp 문법은 보이지 않는다. JSP가 서버페이지인 이유다.

 

 

 

1. 데이터 전송을 위한 form

---

우리가 데이터 전송을 위해서는 폼(form) 태그를 알아야 한다.

<form name = "joinForm" action="Action_to.jsp" method="get">
    ...
    <input type="submit" value="전송">
</form>

 

HTML 의 form 태그는 input 태그를 이용해 사용자로부터 값을 입력 받고 전송할 수 있다.

 

<input type="submit" value="전송">

 

submit 버튼을 통해 form 에 입력된 모든 입력을 확정하고, action 이 실행된다.

 

<form name = "joinForm" action="Action_to.jsp" method="get">
    ...
</form>

 

submit 으로 이동할 페이지(혹은 서버)와 데이터 전달 방식은 form 태그의 action 과 method 속성에 의해 결정된다.

action은 submit 버튼이 클릭될 때 이동할 서버의 서블릿이나 클래스 또는 페이지를 지정하는 속성이고, method는 데이터 전달 방식을 결정하는 속성이다.

 

<label for="userid">아이디</label> &nbsp;
<input type="text" id="user_id" name="userid"/><br/>

 

form 안에 위와 같은 input 태그를 넣었다고 하자. 입력 방식(type)은 text, id는 user_id, name은 userid 이다.

 

여기서 값 전달에 중요한 속성은 name 이다. name은 form에 입력한 값들을 구분하고 이름지어서 싣고 이동하는 역할을 한다. 아이디에 입력된 값을 userid 라는 이름으로 다른 값과 구분지어 전달된다는 의미다.

 

id는 css, label, 자바스크립트나 제이쿼리에서 select 하기 위한 태그의 이름이다. 태그 구분용인 것이다.

 

 

위의 정보를 바탕으로 아래와 같은 실습용 form을 만들었다.

<form name = "joinForm" action="03_Action_to.jsp" method="get">
    <!-- 라벨 사용 여부는 크게 상관 없음 -->
    <label for="userid">아이디</label> &nbsp;
    <input type="text" id="userid" name="userid"/><br/>
    <label for="name">이름</label> &nbsp;
    <input type="text" id="name" name="name"/><br/>
    <label for="pwd">비밀번호</label> &nbsp;
    <input type="password" id="pwd" name="pwd"/><br/>
    <label for="pwdCheck">비밀번호 확인</label> &nbsp;
    <input type="password" id="pwdCheck" name="pwdCheck"/><br/>
    <label for="phone">전화번호</label> &nbsp;
    <input type="text" id="phone" name="phone"/><br/>

    <!-- 내용 숨김 -->
    <input type="hidden" name="gender" value="Male"/>

    <!-- 전송 버튼 -->
    <input type="submit" value="회원가입">
</form>

 

해당 폼(joinForm)은 데이터를 입력 받으면 각각 name에 지정해준 이름대로 / 03_Action_to.jsp에(action) / get 방식(method)으로 데이터를 전달한다.

 

 

 

2. 데이터 전송 방식 (get, post)

---

 

데이터 전달 방식은 대표적으로 get 과 post 가 있다.

데이터 전송 방식	속도	보안	전송량
get	빠름	X	제한적
post	느림	O	제한없음

 

get, post 방식으로 전달된 데이터들은 request 객체에 담긴다. 앞서 지정한 name으로 분류돼서 말이다.

 

 

위에서 제작한 폼으로 아래와 같이 데이터를 전송했다고 하자.

 

아이디(name="userid") : scott

이름(name="name") : 스콧

비밀번호(name="pwd") : 1234

비밀번호 확인(name="pwdCheck") : 1234

전화번호(name="phone") : 010-1111-1111

hidden 방식으로 전달된 숨겨진 데이터(name="gender") : Male

 

 

get 데이터 전송 방식

 

넘어간 03_Action_to.jsp 위치 주소에 ? 가 붙으면서 우리가 작성한 값들이 노출된다.

get 은 쿼리스트링 이라는 형식으로 전송된다. 쿼리스트링은 요청 페이지주소 뒷편에 변수와 값을 연결하여 위와 같이 전달한다. 주소와 파라미터는 ? , 파라미터와 파라미터는 & 로 구분한다.

 

form 에 method 를 지정하지 않으면 get 방식으로 전달한다.

 

 

post 데이터 전송 방식

 

반면 post 방식은 입력 데이터를 노출하지 않는다. 데이터를 숨기는 방식이다.

 

그렇기에 간단하게 전달할 값이나 노출되도 상관없는 데이터라면 get 전송 방식으로, 회원정보와 같은 보호되어야할 데이터는 post 방식으로 전달한다. 

 

 

 

3. 전송된 데이터 받기 1 (request.getParameter())

---

앞서 get, post 방식으로 전달된 데이터들은 request 객체에 담긴다고 했다.

 

request 는 주로 서버에서 정보를 요청할 때 사용하는 객체로, 객체의 각 정보들을 이용하여 사이트에 유용한 설정 및 실행에 이용된다.

<!-- Request 객체가 담고 있는 정보들 -->
<h2>
컨텍스트 패스 : <%=request.getContextPath() %><br>
요청방식 : <%=request.getMethod() %><br>
요청한 URL : <%=request.getRequestURL() %><br>
요청한 URI : <%=request.getRequestURI() %><br>
서버의 이름 : <%=request.getServerName() %><br>
프로토콜 : <%=request.getProtocol() %><br>
</h2>

 

지금은 이런 게 있다.. 정도로 알아두고 본론으로 돌아와서.

 

전송된 데이터들을 받아오기 위해서는 request.getParameter() 를 사용해야 한다.

<%
    // "name" : form 내부에 있던 해당 입력란의 name값
    String name = request.getParameter("name");
    // "userid" : form 내부에 있던 해당 입력란의 name값
    String id = request.getParameter("userid");
    String pwd = request.getParameter("pwd");
    String pwdCheck = request.getParameter("pwdCheck");
    String phone = request.getParameter("phone");
    
    // 없는 데이터 값
    String email = request.getParameter("email"); // 에러 대신 null
    String useritem = request.getParameter("useritem");
    
    // hidden
    String gender = request.getParameter("gender");
%>

 

(괄호) 안에는 form 에서 name으로 지정해준 값을 넣는다.

 

이때, request.getParameter() 로 출력한 값은 모두 String 이다.(setParameter 도 마찬가지다.) String 이 아닌 다른 자료형으로 값을 받기 위해서는 String 데이터 형변환 형식인 ' (자료형객체).parse() '를 사용해야 한다.

// getParameter 의 반환은 String
int age = Integer.parseInt(request.getParameter("age"));
String userid = request.getParameter("userid");

 

 

이렇게 전송된 입력 데이터를 꺼내어 <% %> 안에서 변수를 지정하고 저장하면, 해당 jsp 파일 안 html 태그에서도 <%= %> 을 통해 활용이 가능하다.

<h3>
    성명 : <%=name %><br>
    아이디 : <%=id %><br>
    비밀번호 : <%=pwd %><br>
    비밀번호 확인 : <%=pwdCheck %><br>
    전화번호 : <%=phone %><br>
    성별 : <%=gender %><br>
    이메일 : <%=email %><br>
    useritem : <%=useritem %>
</h3>

 

 

 

4. 전송된 데이터 받기 2 (request.getParameterValues())

---

input 으로 값을 받는 타입 종류 중에 radio, checkbox, select 은 어떻게 값을 받을까?

<!-- radio -->
<input type="radio" name="gender" value="male"> 남성

<!-- checkbox -->
<input type="checkbox" name="item" value="shoes"> 신발

<!-- select -->
<select id="job" name="job" size="1">
    <option value="학생">학생</option>
    <option value="직장인">직장인</option>
</select>

 

위와 같이 value 를 지정해 선택한 항목에 대한 값을 받아온다.

이렇듯 단일 선택지인 경우 request.getParameter() 를 통해 값을 받아올 수 있다.

 

하지만 checkbox나 select에 multiple 속성이 추가되어 중복 선택이 가능해진다면 같은 name 에서 여러개의 값을 받아오기 위해 request.getParameterValues() 를 사용해야 한다.

 

<h2>악세사리</h2>
관심 항목을 선택하세요.
<hr />
<form method="get" action="04_Checkbox_to.jsp">
    <!-- 실제 데이터는 value -->
    <input type="checkbox" name="item" value="shoes"> 신발
    <input type="checkbox" name="item" value="bag"> 가방
    <input type="checkbox" name="item" value="belt"> 벨트<br>
    <input type="checkbox" name="item" value="cap"> 모자
    <input type="checkbox" name="item" value="watch"> 시계
    <input type="checkbox" name="item" value="diamond"> 쥬얼리<br>
    <input type="submit" value="전송">
</form>

 

 

<%
	String[] items = request.getParameterValues("item");
%>

 

값은 여러개이며 String 타입이기 때문에 String 배열로 받는다.

 

<%
    for (String it : items) {
        out.print("<h3>" + it + "</h3>");
        }
    }
%>

신발(value="shoes"), 모자(value="cap")

 

배열에서 값을 추출하는 java 문법을 이용하면 선택한 항목의 value 값을 출력할 수 있다.

 

 

<form method="get" action="05_Select_to.jsp">
<label for="interest">관심분야</label><br>
<!-- multiple 복수개 선택 가능 -> getParameterValues -->
<select id="interest" name="interest" size='5' multiple="multiple">
    <option value="에스프레소">에스프레소</option>
    <option value="로스팅">로스팅</option>
    <option value="생두">생두</option>
    <option value="원두">원두</option>
    <option value="핸드드립">핸드드립</option>
</select><br/><br/>
<input type="submit" value="전송">
</form>

 

중복 선택이 가능하도록 만든 size 5 짜리의 select 다.

 

<%
    String[] interests = request.getParameterValues("interest");
%>

<%
    if(interests == null) out.print("선택한 항목이 없습니다.");
    else{
        for(String interest : interests){
            out.print("<h2>" + interest + "</h2>");
        }
    }
%>