AJAX로 요청을 할 때 성공을 한다면 success: 에 있는 코드가 실행되고 만약 실패한다면 error: 에 있는 코드가 실행이 된다!
test3.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../js/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(function() {
$('#btnOk').on('click', function() {
$.ajax({
type: "get", // 요청방식(GET or POST) 지정
url: 'test3_result.jsp',
data: $('form').serialize(),
dataType: 'text',
success: function(response) {
$('#resultArea').html(response);
},
error: function(xhr, textStatus, errorThrown) { // 요청에 대한 처리가 실패했을 경우(요청 에러 발생 시)
$('#resultArea').html('xhr = ' + xhr + '<br>' + 'textStatus = ' + textStatus + '<br>' + 'errorThrwn = ' + errorThrown);
}
});
});
});
</script>
</head>
<body>
<h1>학생 정보 입력</h1>
<h1>로그인</h1>
<form action="" method="post">
<table>
<tr>
<td>아이디</td>
<td><input type="text" name="id" id="id" required="required" size="20"></td>
</tr>
<tr>
<td>패스워드</td>
<td><input type="password" name="passwd" id="passwd" required="required" size="20"></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" value="확인" id="btnOk">
</td>
</tr>
</table>
<div id="resultArea"><!-- AJAX 처리 결과 출력될 위치 --></div>
</form>
</body>
</html>test3.jsp에서 test3_result.jsp로 id와 password 의 value 를 보내서 db에서 확인!
test3_result.jsp
<%@page import="java_mail2.MemberDAO"%>
<%@page import="java_mail2.JdbcUtil"%>
<%@page import="java_mail2.MemberBean"%>
<%@page import="java.sql.Connection"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- test1.jsp 페이지에서 AJAX 를 통해 요청한 작업에 대한 응답 결과를 생성하는 페이지 -->
<h1>AJAX - test3_result.jsp</h1>
<!-- test1.jsp 페이지로부터 AJAX 를 통해 전달받은 파라미터(id, passwd) 를 사용하여 로그인 작업 수행 -->
<!-- 전달받은 id, passwd 파라미터를 이용하여 db에서 조회 후 "admin", "1234" 인지
판별하여 일치할 경우 "로그인 성공", 아니면 "로그인 실패" 출력 -->
<%
// java_mail2.MemberBean 객체를 활용하여 id, passwd 저장
MemberBean memberBean = new MemberBean();
memberBean.setId(request.getParameter("id"));
memberBean.setPasswd(request.getParameter("passwd"));
// MemberBean 객체 생성 및 selecetLoginMember() 메서드를 호출하여 로그인 판별
Connection con = JdbcUtil.getConnection();
MemberDAO dao = MemberDAO.getInstance();
dao.setConnection(con);
boolean isLoginSuccess = dao.selectLoginMember(memberBean);
if(isLoginSuccess){
out.println("<h3>로그인 성공! " + memberBean.getId() + "님 환영합니다!</h3>");
} else {
out.println("<h3>로그인 실패 </h3>");
}
%>
</body>
</html>test3.jsp에서 받은 파라미터값(id,password)를 이용하여 db에서 조회 후 일치하면
로그인 성공! 아니면 로그인 실패! 출력
결과출력(id:admin, password:1234)
'JSP' 카테고리의 다른 글
| JSON (1) - 기본 사용법 (0) | 2022.03.12 |
|---|---|
| AJAX (4) - blur 이벤트 처리 (0) | 2022.03.09 |
| AJAX (2) - form 데이터를 한번에 옮기기 (0) | 2022.03.09 |
| AJAX (1) - 사용법 (0) | 2022.03.09 |
| JQuery (on 이벤트2) (0) | 2022.03.04 |
