예제로 배우는 JSP

예제로 배우는 JSP

자바 웹 프로그래밍의 세계로!

관련 카테고리

06 form 데이터 주고 받기

# form 데이터 주고 받기 form 태그와 request 객체를 이용하여 데이터를 주고 받아 봅시다. --- ### 데이터 전송 웹서비스는 클라이언트와 서버로 구성되어있고, 이들은 요청과 응답이라는 방식으로 통신함을 배웠습니다. 이번 장에서는 클라이언트의 데이터를 웹서버로 전송하는 방법을 알아봅시다. ![Imgur](https://i.imgur.com/kvuq6xA.png) --- <a name="form-tag"></a> ### form 태그의 이해 form 태그는 클라이언트에서 서버로 데이터 전송을 위해 사용합니다. 폼 태그의 대표적인 사용 예로 로그인을 들 수 있습니다. 로그인을 위해 사용자는 아이디와 패스워드 서버로 전송해야 하는데 이때 폼 데이터를 이용합니다. form 태그는 여러 속성을 가지고 있으나 이중 중요한 것은 아래의 두 속성입니다. + action: 수신 대상 + method: 전송 방식 ``` <form action="result.jsp" method="post"> ... </form> ``` 위 코드를 예로 설명하면, form의 수신대상은 `result.jsp`이고, 전송방식은 `post`방식입니다. post 방식이란 무엇일까요? --- <a name="method-get-post"></a> ### 전송방식: GET / POST form에서의 전송방식은 두가지(**GET / POST**)가 존재합니다. 데이터를 쪽지에 적어서 보내는 것을 GET 이라고 한다면, POST는 보안가방 안에 데이터 쪽지를 담아서 전달하는 것이라 할 수 있습니다. ![Imgur](https://i.imgur.com/3A7Eymw.png) 두 방식을 간단히 비교하면 아래와 같습니다. | Method | 속 도 | 보 안 | 전송량 | |:-------|:----:|:----:|:----------------| | GET | 빠름 | 없음 | 제한적(255 Bytes) | | POST | 느림 | 있음 | 제한 없음 | 그럼 form태그를 사용하여 데이터 전송을 실습해봅시다. --- ### 화면 설계 대략적인 화면을 설계해보았습니다. ![Imgur](https://i.imgur.com/mjGwRBZ.png) ### 화면 구현 설계를 토대로 페이지를 생성하였습니다. `form.jsp` ```jsp <%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <form action="result.jsp" method="post"> <label>이름: </label> <input name="name" type="text"><br> <label>이메일: </label> <input name="email" type="text"><br> <label>비밀번호: </label> <input name="password" type="password"><br> <input type="submit" value="전송"> </form> </body> </html> ``` `result.jsp` ```jsp <%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <h1>전달받은 데이터</h1> <ul> <li>이 름: <%= request.getParameter("name") %></li> <li>이메일: <%= request.getParameter("email") %></li> <li>비밀번호: <%= request.getParameter("password") %></li> </ul> </body> </html> ``` --- ### 실행결과 한글파일이 결과화면에 깨져서 나왔네요. (이문제는 추후에..) ![Imgur](https://i.imgur.com/D14VcjC.png) ![Imgur](https://i.imgur.com/mJOFQp2.png) --- ### 핵심 키워드 + [form 태그의 이해](#form-tag) + [전송방식: GET/POST](#method-get-post) --- ### Next.. 로그인/로그아웃 페이지 구현하기