▷ 아이디 입력란에서 포커스가 해제될 때(커서가 빠져나갈때) 이벤트 처리 => on('blue') 활용
→ AJAX를 사용하여 아이디 값을 test4_result.jsp 페이지로 전달
→ test4_result.jsp 페이지에서 MemberDAO 객체의 selectId() 메서드를 호출하여
→ 파라미터로 id 값을 전달하면, 메서드 내에서 mail_member 테이블을 id 를 조회하고
→ 일치하는 아이디가 있으면 "이미 사용중인 아이디입니다" 출력하고
아니면 "사용 가능한 아이디입니다."
test4.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() {
$('#id').on('blur', function() {
$.ajax({
type: 'get', // 요청방식(GET or POST) 지정
// url: '../java_mail2/MemberLoginPro.auth', // 요청 URL 지정
url: 'test4_result.jsp',
data: {
id: $('#id').val(),
},
dataType: 'text',
success: function(response) {
$('#idCheckResult').html(response);
}
});
// $('#idCheckResult').html('포커스 해제');
// $('#idCheckResult').css('color', 'red');
});
});
</script>
</head>
<body>
<h1>학생 정보 입력</h1>
<form action="MemberJoinPro.auth" method="post">
<table>
<tr>
<th>이름</th>
<td><input type="text" name="name"></td>
</tr>
<tr>
<th>E-Mail</th>
<td><input type="text" name="email"></td>
</tr>
<tr>
<th>전화번호</th>
<td><input type="text" name="phone"></td>
</tr>
<tr>
<th>아이디</th>
<td>
<input type="text" name="id" id="id">
<div id="idCheckResult"></div>
</td>
</tr>
<tr>
<th>패스워드</th>
<td><input type="password" name="passwd"></td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="등록">
<input type="reset" value="초기화">
</td>
</tr>
</table>
</form>
</body>
</html>
test4_result.jsp
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.sql.DriverManager"%>
<%@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 - test4_result.jsp</h1>
<!-- test1.jsp 페이지로부터 AJAX 를 통해 전달받은 파라미터(id, passwd) 를 사용하여 로그인 작업 수행 -->
<!-- 전달받은 id, passwd 파라미터가 "admin", "1234" 인지 판별하여 일치할 경우 "로그인 성공", 아니면 "로그인 실패" 출력 -->
<%
// java_mail2.MemberBean 객체를 활용하여 id, passwd 저장
String id = request.getParameter("id");
boolean isId = false;
// MemberBean 객체 생성 및 selecetLoginMember() 메서드를 호출하여 로그인 판별
try {
String driver = "com.mysql.jdbc.Driver";
String url = "jdbc:mysql://localhost:3306/study_jsp2";
String user = "root";
String password = "1234";
Class.forName(driver);
Connection con = DriverManager.getConnection(url, user, password);
String sql = "SELECT id FROM member WHERE id=?";
PreparedStatement pstmt = con.prepareStatement(sql);
pstmt.setString(1, id);
ResultSet rs = pstmt.executeQuery();
if(rs.next()){
isId = true;
}
} catch(Exception e) {
System.out.println("예외발생!");
e.printStackTrace();
}
if(isId){
out.println("<h3>사용중인 아이디입니다</h3>");
} else {
out.println("<h3>사용 가능한 아이디입니다</h3>");
}
%>
</body>
</html>
결과출력
'JSP' 카테고리의 다른 글
| JSON (2) - .txt 파일 데이터 가져오기 (0) | 2022.03.12 |
|---|---|
| JSON (1) - 기본 사용법 (0) | 2022.03.12 |
| AJAX (3) - error 처리 (0) | 2022.03.09 |
| AJAX (2) - form 데이터를 한번에 옮기기 (0) | 2022.03.09 |
| AJAX (1) - 사용법 (0) | 2022.03.09 |
