6.7 자바스크립트로 서블릿에 요청하기

웹 사이트에 로그인할 때 ID나 비밀번호를 입력하지 않고 로그인하면 오류 메시지가 출력된다. 앞 절에서는 <form> 태그에서 바로 서블릿으로 데이터를 전송했지만 전송 전에 로그인하면 ID와 비밀번호 입력 유무 체크하기처럼 전송 데이터에 대해 유효성 검사를 하는 경우가 많다. 이런 기능은 자바스크립트로 구현하므로 이번에는 자바스크립트로 서블릿에 요청하는 방법을 알아보겠다.

 

서블릿에 요청할 때 <form> 태그에서 직접 요청하는 것이 아니라 자바스크립트 함수를 호출하고 유효성 검사를 한 후 자바스크립트 함수에서 서블릿에 요청하는 예제를 만들어 보겠다.

 

1. LoginServlet5 클래스를 생성하고 login2.html을 추가로 생성한다.

그림 6-37 실습 파일 위치

2. 다음과 같이 login2.html을 작성한다. 자바스크립트 함수에서 <form> 태그에 접근하여 값 입력 여부를 체크한 후 action 속성에 전송할 서블릿 이름을 지정한다. 그런 다음 submit() 함수를 호출하여 서블릿으로 전송합니다. <input> 태그의 hidden 속성을 지정하면 화면에는 보이지 않지만 value에 미리 값이 저장된다.

 

3. LoginServlet5 클래스를 다음과 같이 작성한다. 서블릿에서 getParameter() 메서드를 이용해 <hidden> 태그로 전송된 주소를 받아 온다.

 

4. 브라우저에서 요청해 보자. ID와 비밀번호를 입력하지 않고 로그인을 클릭하면 오류 창이 나타난다.

그림 6-38 ID와 비밀번호를 입력하지 않은 경우

반면에 ID와 비밀번호를 정상적으로 입력한 경우에는 웹 브라우저로 입력 값을 출력한다.

그림 6-39 ID와 비밀번호를 정상적으로 입력한 경우