반응형
- parameter를 받아올땐 전부 String으로 받아오기에 정수로 변환(Integer.parseInt())를 활용한다.
- 아규먼트로 받아온 값 2개를 Servlet에서 자체적으로 계산하는 service() 메서드를 만든다.
- 올바른 값을 아규먼트 값으로 Client가 넣었는지를 확인해주는 절차 (정규식만들어서 jQuery 사용)
- 한 화면에 밑에 방법처럼 form을 지정해도 가능하지만, 레이아웃이 JSP처럼 여러개 짜여있다면, 밑과 같이 지정하면 곤란하다. 충돌발생 위험이 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function send() {
//form name을 알고 있을때
//const f = document.ff;
//form name을 모를때
const f = document.forms[0];
let su1 = f.su1.value;
let su2 = f.su2.value;
}
</script>
</head>
<body>
<!-- form용도 : Server로 Data를 전송해야할 때 -->
<form name="ff" action="calc.do">
<div>
<!-- id로 입력하면 server로 넘어가지지 않는다. name만 인식한다. -->
수1 : <input name="su1">
</div>
<div>
수2 : <input name="su2">
</div>
<div>
<!-- submit과 button의 차이는 submit은 데이터를 바로 보내버린다.
값을 입력한 상태에서 서버에 보내야하기 때문에, button을 사용해야 한다. -->
<input type="submit" value="계산해줘" onclick="send(this.form);">
</div>
</form>
</body>
</html>
- 정답
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
const regular_number = /^[0-9]{1,5}$/;
function send(f) {
//form name을 알고 있을때
//const f = document.ff;
//form name을 모를때
//const f = document.forms[0];
let su1 = f.su1.value;
let su2 = f.su2.value;
// 입력값 체크...: 정규식 숫자만 입력...
if(regular_number.test(su1)==false) {
alert('숫자만 입력하세요');
su1.value("");
return;
}
if(regular_number.test(su2)==false) {
alert('숫자만 입력하세요');
su1.value("");
return;
}
// 데이터 전송(from data 안에 있는 su1, su2)
// 이거 필수적으로 () 추가해서 함수로 써야한다.
f.submit();
}
</script>
</head>
<body>
<!-- form용도 : Server로 Data를 전송해야할 때 -->
<form action="calc.do">
<div>
<!-- id로 입력하면 server로 넘어가지지 않는다. name만 인식한다. -->
수1 : <input name="su1">
</div>
<div>
수2 : <input name="su2">
</div>
<div>
<!-- submit과 button의 차이는 submit은 데이터를 바로 보내버린다.
값을 입력한 상태에서 서버에 보내야하기 때문에, button을 사용해야 한다.
여기서 this로 들어간것은 button임 / 이 this를 소유하고 있는 form이라고 해석해야함
-->
<input type="button" value="계산해줘" onclick="send(this.form);">
</div>
</form>
</body>
</html>package action;
import java.io.IOException;
import java.io.PrintWriter;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
@WebServlet("/calc.do")
public class calc extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void service(HttpServletRequest request,
HttpServletResponse response
) throws ServletException, IOException {
String su1 = request.getParameter("su1");
String su2 = request.getParameter("su2");
int plus = Integer.parseInt(su1) + Integer.parseInt(su2);
int minus = Integer.parseInt(su1) - Integer.parseInt(su2);
int multiply = Integer.parseInt(su1) * Integer.parseInt(su2);
int divide = Integer.parseInt(su1) / Integer.parseInt(su2);
int remain = Integer.parseInt(su1) % Integer.parseInt(su2);
response.setContentType("text/html; charset=utf-8");
PrintWriter out = response.getWriter();
out.print("<html>");
out.print("<head><title></title></head>");
out.print("<body>");
out.print("::::계산결과::::</br>");
out.print(plus+"<br>");
out.print(minus+"<br>");
out.print(multiply+"<br>");
out.print(divide+"<br>");
out.print(remain+"<br>");
out.print("<a href='calc.html'>다시하기</a>");
out.print("</body>");
out.print("</html>");
}
}반응형
'서버↗' 카테고리의 다른 글
| JSP Model-2 Pattern(★웹프로그래밍 중 가장중요한 흐름★) (0) | 2024.06.18 |
|---|---|
| [본격 JSP] JSP 활용하여 Servlet 작성하기 (0) | 2024.06.17 |
| [오류해결]Servlet Tomcat 실행오류, HTTP 상태 404 오류 (0) | 2024.06.17 |
| Servlet의 요청 및 응답 / Thread에 대해서 / Get, Post (0) | 2024.06.14 |
| 웹 어플리케이션 서버(Servlet) (1) | 2024.06.14 |