서블릿(Servlet) - 로그인 기능 (onsubmit = function(); return false;)

서블릿의 주요 기능

1. 클라이언트로부터 요청을 받는다.
2. 데이터베이스 연동과 같은 비즈니스 로직을 처리한다.
3. 처리된 결과를 클라이언트에 돌려준다.

 

클라이언트가 서블릿에 요청을 하면 먼저 톰캣 컨테이너가 받는다. 그 다음 사용자의 요청이나 응답에 대한 HttpServletRequest 객체와 HttpServletResponse 객체를 만들고 서블릿의 doGet()이나 doPost() 메서드를 호출하면서 이 객체들을 전달한다.

톰캣이 사용자의 요청에 대한 정보를 모든 HttpServletRequest 객체의 속성으로 담아 메서드로 전달하므로 각 HttpServletRequest에서 제공하는 메서드들은 매개변수로 넘어온 객체들을 이용하여 사용자가 전송한 데이터를 받아오거

나 응답할 수 있는 것이다.

<script type="text/javascript">
		function LoginForm__submit(form) {
			let loginId = form.loginId.value.trim();
			let loginPw = form.loginPw.value.trim();
			if (loginId.length == 0) {
				alert('아이디 입력해주세요');
				return;
			}
			if (loginPw.length == 0) {
				alert('비번 입력해주세요');
				return;
			}
			form.submit();
		}
	</script>


	<form method="POST" action="doLogin"
		onsubmit="LoginForm__submit(this); return false;">
		<div>
			아이디 : <input autocomplete="off" type="text" placeholder="아이디 입력해주세요"
				name="loginId" />
		</div>
		<div>
			비밀번호 : <input autocomplete="off" type="text" placeholder="비밀번호 입력해주세요"
				name="loginPw" />
		</div>
		<button type="submit">로그인</button>
	</form>


	<div>
		<a style="color: green" href="list">리스트로 돌아가기</a>
	</div>

 

 

사용자가 아이디와 비밀번호를 입력 후 로그인을 클릭하게 되면 form 태그의 action 속성은 데이터를 전송할 서블릿이나 JSP의 이름을 지정한다. 위에서는 지정된 이름이 doLogin인 서블릿으로 아이디와 비밀번호가 전송된다.

이벤트 발생과 action에 지정된 URL이 적용되는 그 사이의 시점에 처리할 동작을 onSubmit 속성을 통해 지정할 수 있는데, 연결된 함수에 true를 반환하면 form이 전송, false를 반환한다면 form이 전송되지 않는다.

false가 반환되면 이벤트 처리를 그대로 강제 종료 시키기에 action이 처리되지 않는다. 즉, 수동으로 이벤트 처리를 막아두는 것이다.

위 상황에서는 function도 포함 시켜 주었는데, 이를 해주지 않았을 경우 아이디 또는 비밀번호를 작성하지 않아도 form이 실행되어 넘어가버리는 상황이 발생하였다. 따라서 return false로 막아주고, 그 앞에 function을 넣어 아이디 또는 비밀번호가 올바르게 작성되었는지 확인해주고 function에서 submit을 수동으로 작동시켜주었다.