Notice
Recent Posts
Recent Comments
Link
«   2024/07   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

거니의 velog

(15) 자바스크립트로 서블릿에 요청하기 본문

Java_Servlet

(15) 자바스크립트로 서블릿에 요청하기

Unlimited00 2023. 8. 24. 21:12

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

1. 다음과 같이 sec03.ex03 패키지에 LoginServlet5 클래스를 생성하고 login2.html을 추가로 생성한다.

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<script>
			function fn_validate() {
				var frmLogin = document.frmLogin; // <form> 태그의 name 속성으로 <form>태그 객체를 받아온다.
				var user_id = frmLogin.user_id.value; // <form> 태그 내 <input> 태그의 name 속성으로 입력한 ID와 비밀번호를 받아온다.
				var user_pw = frmLogin.user_pw.value;
				
				if((user_id.length == 0 || user_id == '') || (user_pw.length == 0 || user_pw == '')) {
					alert("아이디와 비밀번호는 필수입니다");
                    return false;
				}else {
					frmLogin.method = "post"; // <form> 태그의 전송 방식을 post로 설정한다.
					frmLogin.action = "login5"; // action 속성을 서블릿 매핑 이름인 login5로 설정한다.
					frmLogin.submit(); // 자바스크립트에서 서블릿으로 전송한다.
				}
			}
		</script>
		<title>자바스크립트로 서블릿 요청하기</title>
	</head>
	<body>
	
		<form name="frmLogin" method="post" action="login5" enctype="UTF-8">
			<span>아이디 : </span>
			<input type="text" name="user_id" />
			<br />
			
			<span>비밀번호 : </span>
			<input type="password" name="user_pw" />
			<br />
			
			<button type="submit" onclick="fn_validate();">로그인</button>
			<button type="reset">다시 입력</button>
			<input type="hidden" name="user_address" value="서울시 성북구" /> <!-- <hidden> 태그를 이용해 화면에는 보이지 않게 하면서 값을 서블릿으로 전송한다.  -->
		</form>
	
	</body>
</html>

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

package sec03.ex03;

import java.io.IOException;
import java.io.PrintWriter;

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("/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"); // <hidden> 태그로 전송된 값을 받아온다.
		System.out.println("아이디   : " + id);
		System.out.println("비밀번호 : " + pw);

		String data = "<html>";
		data += "<body>";
		data += "아이디 : " + id;
		data += "<br>";
		data += "비밀번호 : " + pw;
		data += "<br>";
		data += "주소 : " + address;
		data += "</html>";
		data += "</body>";
		out.print(data); // 전송된 값을 브라우저에 출력한다.
	}

	public void destroy() {
		System.out.println("destroy 메서드 호출");
	}
}

4. http://localhost:8090/pro06/login2.html 로 요청한다. ID와 비밀번호를 입력하지 않고 로그인을 클릭하면 오류 창이 나타난다.

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

'Java_Servlet' 카테고리의 다른 글

(17) 서블릿의 비즈니스 로직 처리  (0) 2023.08.25
(16) 서블릿을 이용한 여러 가지 실습 예제  (0) 2023.08.24
(14) GET 방식과 POST 방식 요청 동시에 처리하기  (0) 2023.08.24
(13) 웹 브라우저에서 서블릿으로 데이터 전송하기  (0) 2023.08.24
(12) 서블릿의 응답 처리 방법  (0) 2023.08.23
'Java_Servlet' Related Articles more