[JSP] 01. 기초 (변수 출력/메소드 선언/데이터 전달

수업 내용/[JSP] JSP

[JSP] 01. 기초 (변수 출력/메소드 선언/데이터 전달

프롯 2023. 5. 17. 12:10

JSP는 HTML코드 상에서 자바 코드를 사용할 수 있게 해준다.

다만 출력은 HTML상에서 적용되기 때문에 방법이 달라지는 것을 기억하자.

<% 코드 %>

위와 같이 <% %>사이에 자바 코드를 입력한다.

화면에 변수 출력하기

<%for(int i = 0; i<10; i++){%>
		<%=i %> <!-- 표현식 -->
	<%}%>

표현식을 사용한다.

<%= 변수 %>로 작성하면 변수를 HTML의 body로 리턴하여 출력한다.

메소드 선언하기

    <h2>1~100 사이의 모든 짝수의 합계를 리턴하는 even() 메소드</h2>
    <%!
        int even() {
            int total = 0;
            for(int i = 2; i<=100; i+=2){
                total += i;
            }
            return total;
        }

    %>

    1~100 사이의 모든 짝수의 합 = <%=even() %>

<%! 메소드 선언 %>과 같이

<%! %> 사이에 메소드를 선언한다.

메소드 선언하는 방법은 자바에서와 같다.

느낌표(!)에 주의해야 한다.

데이터 submit(전송)

페이지를 이동하며 파라미터로 데이터를 던지는 방법에는

get 방식과 post 방식 두가지가 있다.

get 방식은 사용하기 편하고 빠른 대신 데이터가 노출된다.

ex) http://localhost:8080/chapter02_jsp/Ex06_03_page_move.jsp?name=%EA%B4%80%EB%A6%AC%EC%9E%90&age21

위와 같이 URL에 전달하고자 하는 데이터가 노출되어 있어 회원가입, 로그인 등에 사용하는 것은 적절하지 않다.

아래는 get 방식을 사용하였다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	function send(f){
		f.action="/chapter02_jsp/Ex04_02_receive.jsp";
		f.submit(); //함수
	}
</script>
</head>
<body>
<form method = "get">
	<fieldset>
		<legend>개인 정보 전송</legend>
		<p>이름 <input type = "text" name="name"></p>
		<p>나이 <input type = "number" name="age"></p>
		<p>
			반려동물(
				<input type="checkbox" name="pet" value="강아지">강아지
				<input type="checkbox" name="pet" value="고양이">고양이
				<input type="checkbox" name="pet" value="돼지">돼지
			)
		</p>
		<p><textarea rows="5" cols="30" name="info" placeholder="자기소개"></textarea> </p>
		<input type="button" value="전송" onclick="send(this.form)">
	</fieldset>
</form>

</body>
</html>

button을 onclick이벤트 발생시켰을 때 this.form의 내용을 전송한다.

send 함수를 보면

정보를 전송할 파일 위치를 먼저 선언하고

submit() 함수로 전송한다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
    
<%
	request.setCharacterEncoding("utf-8");	//받는 쪽에서 인코딩


	String name = request.getParameter("name");
	String age = request.getParameter("age");

	String[] pet = request.getParameterValues("pet");
	String info = request.getParameter("info");
%>
    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<ul>
		<li>이름 : <%=name %> </li>
		<li>나이 : <%=age %> </li>
		<li>반려동물 : 
		<%if(pet != null){
			for(int i = 0; i<pet.length; i++){%> 
				<%=pet[i] %>
			
			<%}
		}
		else{%>
			없음
			
		 <%}%>
		</li>
		<li>자기소개 : <%=info %> </li>
	</ul>
</body>
</html>

받는 파일에서 정보에 대한 인코딩을 진행하고

받아온 데이터를 변수에 대하여 선언한다.

request 클래스를 사용한다.