SOCO
여러 개의 submit버튼을 서블릿이 어떻게 식별할 수 있을까? 본문
1. 브라우저에서 필요한 정보 얻기
ctrl + F12 = > 개발자도구
개발자도구 > Network > Header
내려보면 Form data
2. input 태그의 name 속성
input 태그가 name값을 가지면 그 값이 서블릿에 전달됨
3. type = "text"와 type = "submit" 차이
submit의 경우 해당 버튼을 눌러야 name의 값으로 value가 전달되지만
(누르지 않은 버튼의 경우 name값 자체가 전달되지 않음)
text의 경우 어떤 버튼이든 누르기만 하면 name값으로 사용자가 입력한 value가 전달됨
<form>
<input type="text" name="x"/>
<input type="text" name="y"/>
<input type="submit" name="button" value="덧셈"/>
<input type="submit" name="button" value="뺄셈"/>
</form>ex1. 덧셈이라고 적혀있는 버튼을 누른 경우(submit됨)
"x"라는 name값으로 사용자가 해당 text박스에 입력한 값(이게 text의 value)이 전달됨
"y"라는 name값으로 사용자가 해당 text박스에 입력한 값이 전달됨
"button"이라는 name값으로 "덧셈"이라는 값이 전달됨
ex2. 뺄셈이라고 적혀있는 버튼을 누른 경우(submit됨)
"x"라는 name값으로 사용자가 해당 text박스에 입력한 값이 전달됨
"y"라는 name값으로 사용자가 해당 text박스에 입력한 값이 전달됨
"button"이라는 name값으로 "뺄셈"이라는 값이 전달됨
이 정보는 1.Form data에서 확인할 수 있음
4. request.getParameter("")와 html파일은 어떻게 연결되는것인가?
request.getParameter("x")라고 하면 클라이언트는 이 것(x)을 쿼리스트링으로 사용할 수 있음
ex. http://localhost:8080/calc?x=3
그런데 현실에서 클라이언트는 직접 url을 건드리지는 않음
따라서 서블릿과 연결되어있는 html에서 입력을 받아서 이를 서블릿에 넘겨주는 방식이 사용됨
서블릿과 html은 form태그의 action속성으로 연결해줌
form의 자식 태그로 input type ="text" name ="x" 태그와 input type="submit"을 달아줌.
사용자가 text로 3을 입력하고 버튼을 누르면 html이 서블릿으로 x=3이라는 키값(네임값)을 전달함.
5. 종합
<body>
<form action="calc" method="post">
<div>
<label>계산할 값을 입력 하세요.</label>
</div>
<div>
<label>x : </label>
<input type="text" name="x" />
</div>
<div>
<label>y : </label>
<input type="text" name="y" />
</div>
<div>
<input type="submit" name = "operator" value="덧셈" />
<input type="submit" name = "operator" value="뺄셈" />
</div>
</form>
</body>@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 op = request.getParameter("operator");
int x = 0;
int y = 0;
if(!x_.equals("")) x = Integer.parseInt(x_);
if(!y_.equals("")) y = Integer.parseInt(y_);
int result = 0;
if(op.equals("덧셈"))
result = x+y;
else
result = x-y;
response.getWriter().printf("result : %d%n", result);
}
}
'백 > Servlet,JSP(잠시 pause)' 카테고리의 다른 글
| 웹개발에서 상태 유지의 필요성 (수정중) (0) | 2021.07.01 |
|---|---|
| 데이터 배열로 입력 받기 (0) | 2021.07.01 |
| 계산기 만들기 (0) | 2021.07.01 |
| 클래스, 서블릿 클래스 (0) | 2021.07.01 |
| 서블릿 필터 (0) | 2021.07.01 |
