자바스크립트로 서블릿에 요청하기
1. 다음과 같이 sec03.ex03 패키지에 LoginServlet5 클래스를 생성하고 login2.html을 추가로 생성합니다.
2. 다음과 같이 login2.html을 작성합니다. 자바스크립트 함수에서 <form> 태그에 접근하여 값 입력 여부를 체크한 후 action 속성에 전송할 서블릿 이름을 지정합니다. 그런 다음 submit() 함수를 호출하여 서블릿으로 전송합니다. <input> 태그의 button 속성을 지정하면 화면에는 보이지 않지만 value에 미리 값이 저장됩니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" >
function fn_validate(){
var frmLogin=document.frmLogin;
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="login5";
frmLogin.submit();
}
}
</script>
<title>로그인창</title>
</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="다시입력">
<input type="hidden" name="user_address" value="서울시 성북구" />
</form>
</body>
</html>
3. LoginServlet5 클래스를 다음과 같이 작성합니다. 서블릿에서 getParameter() 메서드를 이용해 <hidden> 태그로 전송된 주소를 받아 옵니다.
package sec03.ex03;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
@WebServlet("/login5")
public class loginServlet5 extends HttpServlet {
public void init()
{
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 address = 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 += "주소: " + address;
data += "</body>";
data += "</html>";
out.print(data);
}
public void destory() {
System.out.println("destory 메소드 호출");
}
}
4. http://localhost:8090/pro06/login2.html로 요청합니다. ID와 비밀번호를 입력하지 않고 로그인을 클릭하면 오류 창이 나타납니다.
'프로그래밍 언어 > 자바 웹' 카테고리의 다른 글
| 서블릿의 비지니스 로직 처리 방법 & 서블릿의 데이터베이스 연동하기 (1) | 2025.05.22 |
|---|---|
| 서블릿을 이용한 여러 가지 실습 예제 (4) | 2025.05.18 |
| GET 방식과 POST 방식 요청 동시에 처리하기 (0) | 2025.05.12 |
| 웹 브라우저에서 서블릿으로 데이터 전송하기 (0) | 2025.05.09 |
| 서블릿을 이용한 환율 계산기 예제 실습 (2) | 2025.05.06 |
