다연이네

[days03] 리다이렉트 + 포워딩 + 서블릿 복습 / 히든(hidden) 본문

JSP

[days03] 리다이렉트 + 포워딩 + 서블릿 복습 / 히든(hidden)

　다연　 2020. 12. 24. 19:47
반응형

 

     test00.jsp
     test00_ok.jsp
     days03.Test00.java 서블릿

     1. test00.jsp           days03.Test00.java        test00_ok.jsp
         get(/jspPro/test/get)  redirect                  name과 age 출력
         post(/jspPro/test/post) forward
         
     (문제 설명)
      test00.jsp 에서 get 방식 또는 post 방식으로 요청을 해도 동일한 서블릿(Test00.java)이
      호출되어 get 일때는  test00_ok.jsp  페이지로 리다이렉트 되고, 
                post일때는 test00_ok.jsp  페이지로 포워딩 되어서
                name 과 age 를 출력하는 문제입니다.

Get 전송
Post 전송

test00.jsp

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="">
<style>
</style>
</head>
<body>
<form action="/jspPro/test/get" method="get">
name : <input type="text" name="name" value="홍길동" /><br>
age : <input type="text" name="age" value="20" /><br>
<input type="submit" value="GET전송" />
</form> 


<form action="/jspPro/test/post" method="post">
name : <input type="text" name="name" value="홍길동" /><br>
age : <input type="text" name="age" value="20" /><br>
<input type="button" value="POST전송" />
</form>

<script>
$(function() {
	$(":button").on("click", function(event) {
	//$("form").children(":button")
	//$("form:last-of-type :button")
		
		$("form").eq(1).submit();
		//$(this).parents("form").submit(); //parent와 parents 차이점 검색
	})
})
</script>
</body>
</html>

 

Test00.java

package days03;

import java.io.IOException;
import java.net.URLEncoder;

import javax.servlet.RequestDispatcher;
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( //url맵핑은 context 밑부터 잡힌다. /test/get, /test/post 주기
		urlPatterns = { 
				"/test/*"
		})
public class Test00 extends HttpServlet{

	@Override
	protected void doGet(HttpServletRequest request, 
    		HttpServletResponse response) throws ServletException, IOException {
		
		String name = URLEncoder.encode(request.getParameter("name"), "UTF-8");
		String age = request.getParameter("age");
		
		String params = String.format("?name=%s&age=%s", name, age);
		
		//String location = "../days03/test00_ok.jsp"+params;  
     	 	  //상대경로 말고 contextpath로 주자 
		String contextPath = request.getContextPath(); // "/jspPro"
		String location = String.format("%s/days03/test00_ok.jsp",contextPath);
		location+=params;
		response.sendRedirect(location);
	}

	@Override
	protected void doPost(HttpServletRequest request, 
    	HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("UTF-8"); //얘를 여기서 안하고 test00_ok.jsp에서 줘도 되나,
																		//보통 서블릿에 준다.
		response.setContentType("text/html; charset=UTF-8"); //
		
		//PrintWriter out = response.getWriter();
		//out.print("post");

		//String path = "../days03/test00_ok.jsp"; //상대경로 말고 contextpath로 주자 
		
		//404
		//String contextPath = request.getContextPath(); // "/jspPro"
		//String path =  String.format("%s/days03/test00_ok.jsp",contextPath);
		
		
		String path =  "/days03/test00_ok.jsp";
		
		RequestDispatcher dis = request.getRequestDispatcher(path);
		dis.forward(request, response);
		//contextPath 안줘도 되는 이유 : 클라이언트로 다시 요청하는게 아니라 서버에서 보내는 것이니
		// contextPath 주면 안됨 (url-pattern에도 contextpath 안주고 /test02 이렇게 주는 듯이)
	}
}

 

test00_ok.jsp

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%-- 
<%
request.setCharacterEncoding("UTF-8");
%>
 --%>
<%-- 
<%
String name = request.getParameter("name");
String age = request.getParameter("age");
%>


>name : <%=name %><br>
>age : <%=age %>
 --%>
>이름 : ${param.name}<br>
>나이 : ${param.age}<br>

 

 

 

 

 

hidden 타입

re02.jsp -> re02_02.jsp -> re02_finish.jsp

  name       addr                name,age, addr, tel 모두 출력

  age          tel

         (name, age 숨기기)

 

re02.jsp에서 name과 age를 입력받아 re02_02로 넘겨주고,

re02_02에서는 그 받은 값들을 숨기고, addr과 tel을 입력받아 re02_finish.jsp로 넘겨준다.

re02_finish.jsp에서는 name, age, addrm tel을 모두 넘겨받아 출력한다. (숨겨진 name, age까지도)

 

 

re02.jsp

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="">
<style>
</style>
<script>
   $(document).ready(function (){     
   });
</script>
</head>
<body>
<h3>re02.jsp</h3>
<form action="re02_02.jsp">
name: <input type="text" id="name" name="name" value="배다연" /><br>
age: <input type="text" value="23" id="age" name="age" /><br>
<input type="submit" />
</form>
</body>
</html>

re02_02.jsp

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
	String name = request.getParameter("name");
	String age = request.getParameter("age");
%>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="">
<style>
</style>
<script>
   $(document).ready(function (){     
	   $(":button").click(function(event) {
	   	 location.href="re02.jsp";
	   })
   });
</script>
</head>
<body>
<h3>re02_02..jsp</h3>
<form action="re02_finish.jsp">
address: <input type="text" name="address" id="address" value="서울시 서대문구 홍제동" /><br>
tel: <input type="text" id="tel" name="tel" value="010-3001-xxxx" /><br>
<input type="submit" value="next" />
<input type="button" value="prev"/>

<input type="hidden" name="name" value="<%=name %>" />
<input type="hidden" name="age" value="<%=age %>" />
</form>
</body>
</html>

re02_finish.jsp

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
String name = request.getParameter("name");
String age = request.getParameter("age");
String address = request.getParameter("address");
String tel = request.getParameter("tel");

%>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="">
<style>
</style>
<script>
   $(document).ready(function (){     
   });
</script>
</head>
<body>
<h3>re03_finish</h3>
name: <%=name %><br>
age: <%=age %><br>
address: <%=address %><br>
tel: <%=tel %><br>
<h3>EL(표현언어)출력</h3>
name:${param.name }<br>
age:${param.age }<br>
address:${param.address }<br>
tel:${param.tel }<br>
</body>
</html>

 

 

여기서 re02_02.jsp를 수정해보자

1) jQuery를 사용해 동적으로 hidden을 만들어 form요소에 자식으로 추가시키기

<script>
   $(document).ready(function (){     
	   
	   var $name = $("<input type='hidden' name='name' value='<%=name%>'>");
	   $("form").append($name);
	   //이렇게 추가 할 수도 있고
	   //밑처럼 추가 할 수도 있다.
	   $("form").append($('<input>').attr({
		   type:'hidden',
		   name:'age',
		   value:'<%=age%>'
	   }));
	   
   });
</script>

2) <% %>와 iterator 활용해서 서버단에서 추가시키기

 <%
    Map<String, String[]> map = request.getParameterMap();
    Set<Entry<String, String[]>> set = map.entrySet();
    Iterator<Entry<String, String[]>> ir = set.iterator();
    while( ir.hasNext() ){
    	Entry<String, String[]>  entry = ir.next();
    	String p_name = entry.getKey();  // 파라미터명
    	String [] p_values = entry.getValue();  // 값
%>
  <input type="hidden" name="<%= p_name %>" value="<%= p_values[0]  %>" />
<%
    }
%>

 

반응형
저작자표시 비영리

'JSP' 카테고리의 다른 글

[days04] accordion, tabs, select로 선택한 부서의 사원 정보 출력  (0) 2020.12.28
[days03] DB연결 (알집부터) (DBConn, DeptDTO, EmpDTO)  (0) 2020.12.24
[days02] 리다이렉트(redirect)와 포워딩(forward)의 차이점  (0) 2020.12.23
[days02] 리다이렉트(redirect)  (0) 2020.12.23
[days02] 요청 파라미터를 처리하는 메소드 / request 요청 헤더 정보  (0) 2020.12.23
'JSP' Related Articles more
Comments