JSP

[Servlet_02] jsp파일에서 Servlet파일로 데이터 전송 (form태그 활용)

korany 2023. 3. 13. 12:29

[calculator 예제]

 

 

calculator.jsp --> Calculator.java

jsp에서 파라미터를 넘겨 -->

servlet파일(.java)로 데이터 전송하기

 

 

 

 

1.cal.jsp

1) <body> 영역에서 <input>태그안에서 name을 지정해줌

2) 

1) jsp파일에서 파라미터로 넘기고싶은 것을 form 태그의 name으로 지정 

2) form태그의 name은 su1, su2 

3) this.form은 button을 감싸고 있는 form태그를 의미한다.

4) script영역에서 함수function으로 servlet명 calc.do를 넘김

5) form 테이블 내부의 action="calc.do" 로 인해  servlet에 calc.do?su1=3&su2=2형태로 전송

 

2. calculator.java

1) jsp 파일에서 넘어온 파라미터들의 정보를 request 객체로 받는다.

2)calc.do가 호출되면 service메서드가 실행된다!

3) 파라미터로 넘어오는 것은 전부 String 자료형이기 때문에 정수형으로 받고 싶은 경우, Integer.parseInt()로 정수형으로 변경해줘야 한다.

4)클라이언트 측에서 넘어온 su1과 su2에대한 파라미터 값을 받는다. (calc.do?su1=3&su2=2)

 

1.cal.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>계산기 과제</title>

<script type="text/javascript">

	function myClick(f) {
		let su1 = f.su1.value;
		/* 입력상자1번에 있던 값을 가져오기 */
		let su2 = f.su2.value;
		
		// 정규식을 통해 숫자인지 판단
		let num_patt = /^[0-9]+$/;
		if(!num_patt.test(su1)){
			alert("숫자만 입력할 수 있습니다.");
			return;
		}
		if(!num_patt.test(su2)){
			alert("숫자만 입력할 수 있습니다.");
			return;
		}
		// su1과 su2를 calc.do로 보내기
		// f.action = "calc.do"
		f.submit();
		
	}

</script>
</head>
<body>
	<form action="calc.do">  
		수1 : <input name="su1"><br>
		수2 : <input name="su2"><br>
		<!-- /calc.do?su1=3&su2=2 -->
		<input type="button" value="확인" onclick="myClick(this.form);">
	</form>
</body>
</html>

2. calculator.java

package action;

import java.io.IOException;
import java.io.PrintWriter;

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("/calc.do")
public class Calculator extends HttpServlet {
	private static final long serialVersionUID = 1L;

	//calc.do가 호출되면 service메서드가 실행된다!
	protected void service(HttpServletRequest request, 
			HttpServletResponse response) throws ServletException, IOException {
		
		//클라이언트 측에서 넘어온 su1과 su2에대한 파라미터 값을 받는다.
		//calc.do?su1=3&su2=2
		
		int su1 = Integer.parseInt(request.getParameter("su1"));
		//(request.getParameter("su1") : "3"
		int su2 = Integer.parseInt(request.getParameter("su2"));
		//(request.getParameter("su2")) : "2"
		
		response.setContentType("text/html; charset=utf-8");
		PrintWriter out = response.getWriter();
		
		
		out.print("<html>");
		out.print("<body>");
		
			out.printf("+ 결과 : %d<br>", su1 + su2);
			out.printf("- 결과 : %d<br>", su1 - su2);
			out.printf("* 결과 : %d<br>", su1 * su2);
			out.printf("/ 결과 : %d<br>", su1 / su2);

		out.print("</body>");
		out.print("</html>");
	}

}