티스토리 뷰
Submit버튼이 한 개일 경우 form 태그의 action을 참조해서 웹 서블릿을 호출한다.
하지만 이번에는 여러 개의 Submit버튼을 사용한다면 모두 동일한 Submit을 호출하게 된다.
Submit코드가 한개일 경우에 대해서 한번 보자!
F12 개발자도구의 Newtwork를 통해서 버튼을 눌렀을 때 전달되는 값을 확인해보자.
*참고: 웹브라우저에서 F12를 누르면 아래의 화면이 나오고, newtwork를 누르면 전달되는 내용이 나온다.
Form Data의 값을보면 x=1&y=1 이렇게 값이 전달된다.
자 그러면 두개의 Submit이 있을 경우를 통해서 확인해보자!
두 개의 Submit버튼 모두 Add를 호출한다. 즉, 같은 값을 서블릿에 전달하게 된다.
이렇게 빼기를 눌렀지만 Form Data값은 x=1&y=1로 다른 전달 정보가 없다. 동일하다는 이야기다.
그렇다면 어떻게 전달해야 할까? 방법은 있다. 전달 값에 구분할 수 있는 무언가를 넣어주면 된다.
그게 바로 "name"속성이다. 코드를 통해서 확인해보자!
*참고: name이라는 속성은 무언가를 참조할때 사용한다.
그리고 결과를 개발자 도구를 통해서 다시 확인하자!
빼기 submit버튼 눌렀을떄 => x:1 y:1 operator: 빼기
더하기 submit버튼 눌렀을때 => x:1 y:1 operator: 더하기
operator 다음의 값은 value(버튼에 보이는 이름)의 값을 받아온다!
자 그렇다면 이제 전달 받는 서블릿 코드를 수정해주면 되겠다.
이번에는 더하기 빼기를 모두 할 수 있는 예제 코드를 다시 작성해보자!
calc.html 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action="calc" method="post">
<div>
<label>두개의 숫자를 입력</label>
</div>
<div><input type="text" name="x"/><input type="text" name="y"/></div>
<div>
<input type="submit" name="button" value="더하기" />
<input type="submit" name="button" value="빼기" />
</div>
</form>
</body>
</html>이제 submit버튼을 누르면 각 버튼의 name속성을 지정했기 때문에 value값을 전달한다.
이 부분을 서블릿 코드에서 어떻게 전달받을 것인지 적용해보자!
Calc.java코드
package com.newlecture.web;
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")
public class Calc extends HttpServlet {
@Override
protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setCharacterEncoding("UTF-8");
response.setContentType("text/html; charset=UTF-8");
String x_ = request.getParameter("x");
String y_ = request.getParameter("y");
String btn = request.getParameter("button");
int x = 0, y = 0;
int result = 0;
if(!x_.equals("")) x = Integer.parseInt(x_);
if(!y_.equals("")) y = Integer.parseInt(y_);
if(btn.equals("더하기")) result = x + y;
else result = x - y;
response.getWriter().printf("Result is %d\n", result);
}
}
버튼의 내용은 String 형식으로 받아 btn에 저장하고 조건문 if를 통해서 어떤 버튼을 전달받았는지 확인한다.
빼기 submit을 눌렀을 때 button: 빼기라고 참조값도 잘 전달되고 result is 0으로 결과 값도 잘 출력되는 것을 확인할 수 있다.
간단한 예제이지만 개발자 도구를 통해서 어떻게 전달되는지 어떻게 해결해야 하는지 자세히 공부할 수 있는 기회였다.
'Servlet JSP' 카테고리의 다른 글
| 상태 유지의 필요성? (0) | 2021.04.23 |
|---|---|
| 입력 데이터 배열 전달 (0) | 2021.04.23 |
| JSP 연습문제 더하기 웹 프로그램 (0) | 2021.04.23 |
| 서블릿 필터 Servlet Filter (0) | 2021.04.22 |
| 전달 할 내용이 많을 경우에는 역시 POST(feat. 오류 및 문제해결) (0) | 2021.04.22 |