반응형
일반적으로 HTML의 form 태그를 이용해서 서블릿을 호출한다.
하지만 아이디, 비밀번호 검증 등 프론트엔드 영역에서 추가 동작을 필요로 하는 경우가 있다.
이 경우 자바스크립트를 이용해 서블릿을 호출하는 순서를 변경할 수 있다.
먼저 HTML의 form 태그에서 <input type="submit" .../> 호출하는 대신 onClick 속성을 이용해 함수를 호출한다.
호출한 함수에서 필요로 하는 동작(아이디, 비밀번호 입력 여부)을 수행한 뒤 자바스크립트의 document 객체를 활용해서 서블릿을 호출한다.
login_form.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>로그인 테스트</title>
<script type="text/javascript">
function fn_validate() {
// <form> 태그의 name 속성으로 <form> 태그 객체를 받아온다.
var frmLogin = document.frmmLogin;
var user_id = frmLogin.user_id.value;
var user_pw = frmLogin.user_pw.value;
if ((user_id.length == 0 || user_id == "")
|| (user_pw.length == 0 || user_pw == "")) {
alert("아이디와 비밀번호는 필수입니다.");
} else {
frmLogin.method = "post";
frmLogin.action = "login";
frmLogin.submit(); // 자바스크립트에서 서블릿으로 전송
}
}
</script>
</head>
<body>
<form name="frmLogin" method="post" action="login" encType="UTF-8">
아이디 : <input type="text" name="user_id" /><br />
비밀번호 : <input type="password" name="user_pw" /><br />
<input type="button" onClick="fn_validate()" value="로그인" />
<input type="reset" value="다시 입력" />
</form>
</body>
</html>LoginServlet.java
package com.study {
@WebServlet("/login")
public class LoginServlet extendhs HttpServlet {
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=UTF-8");
PrintWriter writer = response.getWriter();
String id = request.getParameter("user_id");
String pw = request.getParameter("user_pw");
System.out.println("아이디 : " + id);
System.out.println("비밀번호 : " + pw);
writer.print("<!DOCTYPE html>");
writer.print("<html>");
writer.print(" <head>");
writer.print(" <meta charset=\"UTF-8\" />");
writer.print(" <title>결과</title>");
writer.print(" </head>");
writer.print(" <body>");
writer.print(" 아이디 : " + id + "<br />");
writer.print(" 비밀번호 : " + pw + "<br />");
writer.print(" </body>");
writer.print("</html>");
}
}
}반응형
'Study > Java' 카테고리의 다른 글
| [Java] 정규표현식을 이용한 파일구분자 바꾸기 (0) | 2021.03.22 |
|---|---|
| 자바 웹 프로젝트 디렉토리 구성 (0) | 2021.01.08 |
| Iterator 와 For-each 비교 (4) | 2020.12.20 |
| Oracle JDBC 예제 코드(PrepareStatement) (0) | 2020.11.11 |
| 세 가지 모듈(Module) - Java 9 Module, IntelliJ IDEA Module, Module of Build System (0) | 2020.10.25 |
