Back/JSP
자바스크립트로 서블릿에 요청하기
soyeon26
2022. 1. 31. 06:42
웹사이트에서 로그인을 할 때 전송 데이터에 대해 유효성 검사를 하는 경우가 많다.
이런 기능은 자바스크립트로 구현한다.
서블릿에 요청할 때 <form>태그에서 직접 요청하는 것이 아니라 자바스크립트 함수르 호출하고 유효성 검사를 한 후 자바스크립트 함수에서 서블릿에 요청하는 예제 실습을 했다
login.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
function fn_validate() {
//<form> 태그의 name 속성으로 <form>태그 객체를 받아온다.
var formLogin = document.formLogin;
//<form>태그 내 <input>태그의 속성으로 입력한 ID와 비밀번호를 받아온다
var user_id = formLogin.user_id.value;
var user_pw = formLogin.user_pw.value;
if((user_id=="" || user_pw =="") || (user_id.length == 0 || user_pw.length == 0)){
alert("아이디와 비밀번호를 입력해주세요.");
}
else{
formLogin.method = "post"; //전송방식 post
formLogin.action = "login"; //action 속성을 서블릿 매핑 이름으로
formLogin.submit(); //자바스크립트에서 서블릿으로 전송
}
}
</script>
<title>로그인</title>
</head>
<body>
<form name="formLogin" 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="다시입력">
<!--화면에는 보이지 않게 값을 서블릿으로 전송 -->
<input type="hidden" name="user_address" value="수원시 권선구"/>
</form>
</body>
</html>LoginServlet.java
package sec01.ex01;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletConfig;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/login")
public class LoginServlet extends HttpServlet {
//초기화
public void init(ServletConfig config) throws ServletException {
System.out.println("init 메소드 호출");
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setContentType("text/html; charset=\"UTF-8\"");
PrintWriter out = response.getWriter();
String id = request.getParameter("user_id");
String pw = request.getParameter("user_pw");
String add = request.getParameter("user_address");
System.out.println("아이디: " + id);
System.out.println("비밀번호: " + pw);
String data = "<html>";
data += "<body>";
data += "아이디: " + id;
data += "<br>";
data += "패스워드: " + pw;
data += "<br>";
data += "주소: " + add;
data += "</body>";
data += "</html>";
out.print(data);
}
public void destroy() {
System.out.println("destroy 메소드 호출");
}
}
ID와 비밀번호를 입력하기 않고 로그인 버튼을 클릭하면 오류 창이 나타난다.
ID와 비밀번호를 정상적으로 입력한 경우에는 웹 브라우저로 입력값을 출력한다.
