서블릿3(여러 개의 버튼 post보내기)

웹에 여러개의 버튼들이 있고, 그 버튼들은 저마다 기능이 다르다. 

두 개의 버튼으로 하나는 덧셈, 다른 하나는 뺄셈을 할 수 있도록 해보자.

 

위와 같은 폼은 두개의 버튼이 있다. 그런데 서버입장에서 두 개의 버튼을 구분할 수 없다.

post로 오는 데이터를 left:2 , right:3 이렇게만 받는다.

그렇다면 서버에 "+"버튼은 덧셈이고, "-"버튼은 뺄셈이야! 라고 알려줘야 한다. 이는 text타입의 input에만 name을 주는게 아니라,

submit의 input에도 name을 주면 된다.

위에서 제출용 input에도 name ="operator"가 추가되었다. 이렇게 페이지에서 left:3, right:3 을 "+"버튼을 눌러 제출하면 다음과 같이 데이터를 날린다.

 

이제 서버가 어떤 버튼을 눌렀는지 구분할 수 있게 된 것이다!!!

이제 이를 request.getParameter메소드로 받아서 그에 따른 로직을 구현하면 된다.

키:operator 에 대한 value가 "+"이면 덧셈을, "-"이면 뺄셈을 해서 그 결과를 화면에 출력한다.

이때 데이터 어떻게 전달되는지 개발자 도구로 한번 봐보자.

(opearator=2%B 는 "+"의 url 인코딩방식이다.)

 

다음으로는 만약 input text박스가 많을 때는 어떻게 name을 다 일일이 주어서 구분하는가?에 대한 문제를 해결해 보자.

지금까지는 아래처럼 input마다 다른 이름을 넣어서 그 값들을 구분해서 서버에서 데이터를 받았다.

<label>값1:</label><input type="text" name="left">
<label>값2:</label><input type="text" name="right">

 

하지만 만약  덧셈을 위한input 박스가 100개가 필요하다면? name을 일일이 다르게 지어줘야하고, 서버에서도 데이터를 받는 코드를 100줄 작성해야한다.

그래서 우리는 그냥 같은 이름으로 보낸다. 같은 이름으로 여러 개를 보내면 배열로 날라간다.

자바 코드에서 request.getParameterValues() 메서드가 보일 것이다. 이는 num으로 날라오는 2개 이상의 데이터들을 배열로 받는다.

배열로 받으면 배열의 데이터들을 전부 더해서 출력하는 로직이다.

클라이언트

 

 

데이터들은 위와 같이 날라간다.