[JSP] 클라이언트에서 요청된 데이터의 action, 그리고 jsp:forward 까지의 흐름, EL 의 편리함

먼저, 다음과 같은 jsp 파일에서 클라이언트에게 정보를 요청했다고 가정하자.

아래의 예시는 입력한 두 숫자 범위안에 있는 수들을 합산하는 내용이다.

form 태그에 직접적으로 action 을 주지 않았으므로 script 아래에 action 을 주고 submit() 한다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSP 표준액션 중 forward 에 대해 알아보자</title>
</head>
<body>
	<h2>입력한 두 수 사이를 누적한 값 알아오기</h2>

	<form name="myFrm">
		<p>
	         첫번째 수 : <input type="text" name="firstNum" size="5" maxlength="5" /><br/>
	         두번째 수 : <input type="text" name="secondNum" size="5" maxlength="5" /><br/>
	     <button type="button" onclick="goSubmit()">계산하기</button> 
      </p>
	</form>
	
	<script type="text/javascript">
		// Function declaration
		function goSubmit() {
			// 정규표현식으로 유효성검사
			const regExp = /^[0-9]{1,5}$/;
			
			const frm = document.myFrm;
			const num1 = frm.firstNum.value.trim();
			const num2 = frm.secondNum.value.trim();
			
			if( !(regExp.test(num1) && regExp.test(num2)) ){
				alert("숫자로만 입력하세요");
				frm.firstNum.value = "";
				frm.secondNum.value = "";
				frm.firstNum.value.focus();
				return; // 종료
			}
		
			frm.action = "02forwardCalc_02.jsp";
			// frm.method = "get"; // method 를 명시하지 않으면 기본값은 "get" 이다.
			frm.submit();
			
		}// end of function goSubmit()----------------------------
	
	</script>
</body>
</html>

▼

action 에 입력된 아래의 jsp 파일로 위의 데이터들이 전달되고, 여기서 데이터를 처리하게 된다.

request.getParameter("name값") 으로 위에서 입력받은 데이터들을 가져온다.

request.setAttribute("키", 저장할객체); 로 키값에 해당하는 객체를 저장하고,

jsp:forward 로 page="" 의 파일로 보낸다. 즉, page="" 의 파일에서 여기서 저장된 객체를 사용할 수 있게 된다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	String s_firstNum = request.getParameter("firstNum");
	String s_secondNum = request.getParameter("secondNum");
	
	int firstNum = Integer.parseInt(s_firstNum);
	int secondNum = Integer.parseInt(s_secondNum);
	
	int sum = 0;
	for(int i=firstNum; i<=secondNum; i++){
		sum += i;
	}
	
	// 결과물은 sum 이다.
	System.out.println("sum => " + sum);

 	 request.setAttribute("firstNum", firstNum); 
 	 request.setAttribute("secondNum", secondNum);
 	 
 	 request.setAttribute("sum", sum);
 	 
%>

<jsp:forward page="02forwardCalc_view_03.jsp"/>
<%--
   웹브라우저 상에서 URL 주소는 그대로 http://localhost:9090/JSPServletBegin/chap03_StandardAction/02forwardCalc_02.jsp 인데 
   웹브라우저 상에 보여지는 내용물은 http://localhost:9090/JSPServletBegin/chap03_StandardAction/02forwardCalc_view_03.jsp 의 내용이 보여진다.      
 --%>

▼

request.getAttribute("키값"); 으로 데이터를 꺼내올 수도 있고, request.getParameter("키값"); 으로 가져올 수도 있다.

아래는 두 가지 방법으로 결과값을 두 가지로 나타내었다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<%
	int firstNum = (Integer)request.getAttribute("firstNum");
	int secondNum = (Integer)request.getAttribute("secondNum");
	int sum = (Integer)request.getAttribute("sum");
	// auto Unboxing (Integer ==> int)
	
	String s_firstNum = request.getParameter("firstNum");
	String s_secondNum = request.getParameter("secondNum");
	// form 태그에서 name 값을 forward 한 파일에서도 바로 getParameter로 가져올 수 있다.
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>계산된 결과값을 보여주는 곳</title>
</head>
<body>
	<h3>계산된 결과값 -1</h3>
	<%=firstNum %>부터 <%=secondNum %>까지의 합은? <br> 
	결과값 : <span style="color:red;"><%=sum %></span>
	
	<br><br>
	
	<h3>계산된 결과값 -2</h3>
	<%=s_firstNum %>부터 <%=s_secondNum %>까지의 합은? <br> 
	결과값 : <span style="color:blue;"><%=sum %></span>
	
	
</body>
</html>

아래는 위의 예시를 EL 을 사용해 표현한 것이다. 더 간단하므로 실무에서 자주 쓰이니 익혀두자.

아래의 jsp 파일에서 클라이언트에게 정보를 요청한 내용과, 받아온 데이터를 처리하는 jsp 는

위에서 EL 을 사용하지 않은 것과 같다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSP 표준액션 중 forward 에 대해 알아보자</title>
</head>
<body>
	<h2>입력한 두 수 사이를 누적한 값 알아오기(EL 사용한 예제)</h2>

	<form name="myFrm">
		<p>
	         첫번째 수 : <input type="text" name="firstNum" size="5" maxlength="5" /><br/>
	         두번째 수 : <input type="text" name="secondNum" size="5" maxlength="5" /><br/>
	     <button type="button" onclick="goSubmit()">계산하기</button> 
      </p>
	</form>
	
	<script type="text/javascript">
		// Function declaration
		function goSubmit() {
			// 정규표현식으로 유효성검사
			const regExp = /^[0-9]{1,5}$/;
			
			const frm = document.myFrm;
			const num1 = frm.firstNum.value.trim();
			const num2 = frm.secondNum.value.trim();
			
			if( !(regExp.test(num1) && regExp.test(num2)) ){
				alert("숫자로만 입력하세요");
				frm.firstNum.value = "";
				frm.secondNum.value = "";
				frm.firstNum.value.focus();
				return; // 종료
			}
		
			frm.action = "03forwardCalc_EL_02.jsp";
			// frm.method = "get"; // method 를 명시하지 않으면 기본값은 "get" 이다.
			frm.submit();
			
		}// end of function goSubmit()----------------------------
	
	</script>
</body>
</html>

▼

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	String s_firstNum = request.getParameter("firstNum");
	String s_secondNum = request.getParameter("secondNum");
	
	int firstNum = Integer.parseInt(s_firstNum);
	int secondNum = Integer.parseInt(s_secondNum);
	
	int sum = 0;
	for(int i=firstNum; i<=secondNum; i++){
		sum += i;
	}
	
	// 결과물은 sum 이다.
	System.out.println("sum => " + sum);
 	 request.setAttribute("firstno", firstNum); 
 	 request.setAttribute("secondno", secondNum);
 	 
 	 request.setAttribute("hab", sum);
 	 
%>

<jsp:forward page="03forwardCalc_EL_view_03.jsp"/>
<%--
   웹브라우저 상에서 URL 주소는 그대로 http://localhost:9090/JSPServletBegin/chap03_StandardAction/03forwardCalc_EL_02.jsp 인데 
   웹브라우저 상에 보여지는 내용물은 http://localhost:9090/JSPServletBegin/chap03_StandardAction/03forwardCalc_EL_view_03.jsp 의 내용이 보여진다.      
 --%>

▼

차이가 있는 곳은 이 jsp 파일이다.

${requestScope.키값} 으로 setAttribute 로 저장된 데이터에 접근할 수 있다.

또한, ${키값} 처럼 사용되는 것을 보면 requestScope 를 생략할 수 있다는 것을 알 수 있다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>계산된 결과값을 보여주는 곳</title>
</head>
<body>
	<h3>계산된 결과값(EL 사용한 것) -3</h3>
	${requestScope.firstno}부터 ${requestScope.secondno}까지의 합은? <br> 
	결과값 : <span style="color:green;">${requestScope.hab}</span>
	
	<br><br>
	
	<h3>계산된 결과값(EL 사용한 것, requestScope. 생략가능) -4</h3>
	${firstno}부터 ${secondno}까지의 합은? <br> 
	결과값 : <span style="color:purple;">${hab}</span>
	
	
</body>
</html>

차이가 있는 두 jsp 파일만을 같이 두고 눈으로 비교해보자.

아래의 EL 을 사용한 것이 더 코드가 간단해진다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<%
	int firstNum = (Integer)request.getAttribute("firstNum");
	int secondNum = (Integer)request.getAttribute("secondNum");
	int sum = (Integer)request.getAttribute("sum");
	// auto Unboxing (Integer ==> int)
	
	String s_firstNum = request.getParameter("firstNum");
	String s_secondNum = request.getParameter("secondNum");
	// form 태그에서 name 값을 forward 한 파일에서도 바로 getParameter로 가져올 수 있다.
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>계산된 결과값을 보여주는 곳</title>
</head>
<body>
	<h3>계산된 결과값 -1</h3>
	<%=firstNum %>부터 <%=secondNum %>까지의 합은? <br> 
	결과값 : <span style="color:red;"><%=sum %></span>
	
	<br><br>
	
	<h3>계산된 결과값 -2</h3>
	<%=s_firstNum %>부터 <%=s_secondNum %>까지의 합은? <br> 
	결과값 : <span style="color:blue;"><%=sum %></span>
	
	
</body>
</html>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>계산된 결과값을 보여주는 곳</title>
</head>
<body>
	<h3>계산된 결과값(EL 사용한 것) -3</h3>
	${requestScope.firstno}부터 ${requestScope.secondno}까지의 합은? <br> 
	결과값 : <span style="color:green;">${requestScope.hab}</span>
	
	<br><br>
	
	<h3>계산된 결과값(EL 사용한 것, requestScope. 생략가능) -4</h3>
	${firstno}부터 ${secondno}까지의 합은? <br> 
	결과값 : <span style="color:purple;">${hab}</span>
	
	
</body>
</html>

저작자표시

개발공부기록공간

[JSP] 클라이언트에서 요청된 데이터의 action, 그리고 jsp:forward 까지의 흐름, EL 의 편리함

▼

▼

▼

▼

티스토리툴바