-
JSP 피피티 03강 POST방식의 데이터 전송JSP 피피티 2020. 8. 22. 15:51
<from>요소를 통한 사용자의 입력값 전달하기
▒단일 입력값 처리
<form>태그의 method 속성에서 POST 방식임을 명시하고. action 속성에서 입력값을 전송받을 JSP페이지를 지정한다.
from.jsp
<form name="form1" method="post" action="ok.jsp"> <fieldset> <input type="text" name="user_id"/> <input type="password" name="user_pw"/> <input type="submit" value="전송"/> </fieldset> </form><input>태그의 name 속성값이 ok.jsp에게는 POST파라미터의 이름이 된다.
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ page trimDirectiveWhitespaces="true" %> <% request.setCharacterEncoding("UTF-8"); String user_id = request.getParameter("user_id"); String user_pw = request.getParameter("user_pw"); %>▒체크박스에 대한처리
- checkbox와 같이 name 속성이 동일한 요소가 여러 개 존재하는 경우 String 배열로 전송된다.
- String 배열로 전송되는 파라미터 수신하기
String[] params = request.getParameterValues("input요소의 name값");from.jsp
<form name="myform" method="post" action="to.jsp"> <input type="checkbox" name="hobby[]" value="축구"> <input type="checkbox" name="hobby[]" value="농구"> <input type="checkbox" name="hobby[]" value="야구"> </form>to.jsp
<% String[] hobbyArray = request.getParameterValues("hobby[]"); %>checkbox는 배열로 받을꺼라 이름에 저렇게 배열표시'[ ]' 해주는게 일반적이다.
GET 방식과 비교하자면
Frontend 측면
GET POST 전송형태 모든데이터가 URL에 노출되기 때문에 보안이 필요한 경우에는 사용할 수 없다. HTML의 FORM요소를 통해 데이터를 전달하는 방식으로 URL에 데이터가 노출되지 않는다. 전송가능용량 URL의 총 길이가 1024byte로 제한되기 때문에 전달할 수 있는 데이터의 크기가 한정되어 있다. 서버 설정에 따라 다르지만 일반적으로 20M 이상 전송 가능하다. 용도 게시물 목록의 페이지 번호 이동, 목록에서 상세 페이지로의 이동 등 링크를 통한 데이터 전송시에 사용된다. 게시물 작성, 회원가입, 구매정보 입력 등 사용자가 입력한 값을 저장/수정하기 위한 데이터 전송시에 사용한다. Backend 측면
-Frontend에서 전송된 값을 GET으로 받는 POST로 받든 상관이 없다.
<form>요소를 통해 입력값을 POST 방식으로 전송하기
from.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ page trimDirectiveWhitespaces="true" %> <!doctype html> <html> <head> <meta charset="UTF-8" /> <title>Hello JSP</title> </head> <body> <h1>POST 전송</h1> <form name="myform" method="post" action="to.jsp"> <div>이름: <input type="text" name="user_name"/></div> <div>나이: <input type="number" name="age"/></div> <div>성별: <label><input type='radio' name='gender' value='M' checked>남자</label> <label><input type='radio' name='gender' value='F' >여자</label> </div> <div>취향: <label><input type='checkbox' name='favor' value='red'>빨강</label> <label><input type='checkbox' name='favor' value='green'>초록</label> <label><input type='checkbox' name='favor' value='blue'>파랑</label> </div> <button type="submit">전송</button> </form> </body> </html>이 페이지에서 사용자의 입력 값을 받아 to.jsp로 보낸다.
to.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ page trimDirectiveWhitespaces="true" %> <% //파라미터의 문자열 셋을 설정한다.(페이지 상단에서 최초 1회) request.setCharacterEncoding("UTF-8"); //<input>태그의 name속성값을 사용하여 사용자의 입력값을 받는다. String userName = request.getParameter("user_name"); String age = request.getParameter("age"); String gender = request.getParameter("gender"); //체크박스와 같이 name속성이 동일한 요소가 여러 개인 경우 파라미터를 배열로 라턴받는다. //-> 반드시 체크박스일 필요는 없다. text필드도 name 속성이 동일한 항목들이 여러 개라면 배열로 처리 가능하다. String[] favor = request.getParameterValues("favor"); //체크박스의 선택값이 저장될 문자열 //--> favor 배열의 각 원소를 첫 번째 파라미터로 설정한 구분값을 적용하여 하나의 문자열로 연결함. String colors = String.join(", ", favor); %> <!doctype html> <html> <head> <meta charset="UTF-8" /> <title>Hello JSP</title> </head> <body> <h1>이름: <%=userName%></h1> <h1>나이: <%=age%></h1> <h1>성별: <%=gender%></h1> <h1>취향: <%=colors%></h1> </body> </html>name 속성이 중복되지 않는 경우 getParameter()메서드를 사용하고 name 속성이 중복되는 경우 getParameterValues()메서드를 사용한다.
String.join(",",fav0r); =>favor 배열 원소 사이사이에 ","를 넣어라
현재페이지를 action페이지로 지정하는 <form>
-게시물 목록의 검색기능
글 검색의 경우 사용자가 입력한 검색어에 따른 조회 결과가 다른 페이지를 통해 표시되는 형태가 아닌, 현재 페이지 를 통해 적용되어야 하기 때문에 <form> 태그의 action 속성이 현재 페이지 스스로를 지정해야 한다.
학과정보를 표현하기 위한 Java Beans 클래스
Department.java
package study.helloweb.model; import lombok.Data; /*학과정보를 저장하기 위한 클래스*/ @Data public class Department { /** 학과번호 */ private int deptno; /** 학과이름 */ private String dname; /** 학과위치 */ private String loc; }department.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ page trimDirectiveWhitespaces="true" %> <%@ page import="study.helloweb.model.Department" %> <% request.setCharacterEncoding("UTF-8"); //파라미터 수신에 사용할 문자셋 String deptno = request.getParameter("deptno"); //파라미터 추출 Department department = null; //검색 결과를 저장할 객체 //검색어에 따른 처리 //-> 최초 실행시 파리미터가 없는 경우를 대비헤야 하므로 deptno값이 존재하는 경우만 수행한다. if(deptno != null && !deptno.equals("")){ //데이터를 저장할 객체를 할당한다. department = new Department(); //deptno가 정해진 범위 안에서만 동작하도록 if문을 구성 if(deptno.equals("101")){ department.setDeptno(101); department.setDname("컴퓨터공학과"); department.setLoc("1호관"); }else if(deptno.equals("102")){ department.setDeptno(102); department.setDname("멀티미디어학과"); department.setLoc("2호관"); }else if(deptno.equals("201")){ department.setDeptno(201); department.setDname("전자공학과"); department.setLoc("3호관"); }else if(deptno.equals("202")){ department.setDeptno(202); department.setDname("기계공학과"); department.setLoc("4호관"); } } %> <!doctype html> <html> <head> <meta charset="UTF-8" /> <title>Hello JSP</title> </head> <body> <h1>학과정보</h1> <!-- 검색폼 영역 --> <form method="post" action="department.jsp"> <div> <label for="deptno">학과번호: </label> <input type="text" name="deptno" value="<%=deptno%>"/> <button type="submit">검색</button> </div> </form> <hr /> <!-- 결과표시영역 --> <% if (department == null){ %> <h2>학과 번호로 검색하세요</h2> <%}else{ %> <table> <tr> <th>학과번호</th> <th><%=department.getDeptno()%></th> </tr> <tr> <th>학과이름</th> <th><%=department.getDname()%></th> </tr> <tr> <th>학과위치</th> <th><%=department.getLoc()%></th> </tr> </table> <%} //end if %> </body> </html>GET방식 으로 전달되는 데이터를 가지고 한 페이지에서 여러페이지의 기능을 구현한 것과 비슷. 처음 department.jsp가 실행 되었을때
이렇게 실행되는데 지정된 학과번호를 입력하고 검색을 하면 아래와 같이 실행된다.
department.jsp에서 학과번호 input 태그에 value속성을 input태그에 입력된 값으로 설정을 해놓았는데 만약 101이라고 검색을 하면 학과번호 input입력칸에 101이라고 남는다. 하지만 아무값도 넣지 않았을때는 'null'이 그대로 표시되어 실제 코드에서 지웠다.
'JSP 피피티' 카테고리의 다른 글
JSP 피피티 04강 Session (2) 2020.08.23 JSP 피피티 06강 쿠키 (0) 2020.08.23 JSP 피피티 02강 GET방식의 데이터 전송(JSP내장객체) (0) 2020.08.21 JSP 피피티 06강 컨트롤러 추상화 (0) 2020.08.21 JSP 피피티 06강 JSTL (0) 2020.08.21