728x90
Ajax를 이용해 회원 가입 시 사용자 ID 중복 여부를 판별하는 예제
1. ajax3.html 파일 작성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>아이디 중복 체크</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
function fn_process() {
var _id = $("#t_id").val(); <!-- 텍스트 박스에 입력한 ID를 가져옴 -->
if (_id == '') {
alert("ID를 입력하세요."); <!-- ID를 입력하지 않으면 오류 메시지를 출력 -->
return;
}
$.ajax({
type: "post",
async: true,
url: "http://localhost:8090/pro16/mem",
dataType: "text",
data: { id: _id}, <!-- ID를 서블릿으로 전송 -->
success: function (data, textStatus) {
<!-- 서버에서 전송된 결과에 따라 메시지를 표시 -->
if (data == 'usable') {
$('#message').text("사용할 수 있는 ID입니다.");
$('#btn_duplicate').prop("disabled", true); <!-- 사용할 수 있는 ID면 버튼을 비활성화 시킴 -->
} else {
$('#message').text("사용할 수 없는 ID입니다.");
}
},
error:function(data,textStatus) {
alert("에러가 발생했습니다.");
},
complete:function(data,textStatus) {
// alert("작업을 완료했습니다.");
}
}); // end ajax
}
</script>
</head>
<body>
<input type="text" id="t_id" />
<input type="button" id="btn_duplicate" onClick="fn_process()" value="ID 중복체크하기" /><br><br>
<div id="message"></div> <!-- 결과를 표시 -->
</body>
</html>
2. MemberServlet.java 서블릿 파일 작성
package sec02.ex01;
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("/mem")
public class MemberServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doHandle(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doHandle(request, response);
}
private void doHandle(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html; charset=utf-8");
PrintWriter writer = response.getWriter();
String id = (String)request.getParameter("id");
System.out.println("id = " + id);
MemberDAO memberDAO=new MemberDAO();
boolean overlappedID=memberDAO.overlappedID(id); // ID 중복 여부를 체크
// 결과를 메시지로 전송
if (overlappedID==true) {
writer.print("not_usable");
} else {
writer.print("usable");
}
}
}클라이언트에서 Ajax로 전송된 ID를 받아 MemberDAO의 overlappedID( ) 메서드로 전달하고, 그 결과를 이용해 클라이언트에게 다른 메시지를 전달
3. MemberDAO.java 클래스 파일 작성
package sec02.ex01;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import javax.naming.Context;
import javax.naming.InitialContext;
import javax.sql.DataSource;
public class MemberDAO {
private Connection con;
private PreparedStatement pstmt;
private DataSource dataFactory;
public MemberDAO() {
try {
Context ctx = new InitialContext();
Context envContext = (Context)ctx.lookup("java:/comp/env");
dataFactory = (DataSource) envContext.lookup("jdbc/oracle");
} catch (Exception e) {
e.printStackTrace();
}
}
public boolean overlappedID(String id) {
boolean result = false;
try {
con = dataFactory.getConnection();
String query = "select decode(count(*),1,'true','false') as result from t_member"; // 오라클의 decode() 함수를 이용해 ID가 존재하면 true, 존재하지 않으면 false를 문자열로 조회
query += " where id=?";
System.out.println("prepareStatement: " + query);
pstmt = con.prepareStatement(query);
pstmt.setString(1, id);
ResultSet rs = pstmt.executeQuery();
rs.next();
result = Boolean.parseBoolean(rs.getString("result")); // 문자열을 불(Boolean) 자료형으로 변환
pstmt.close();
} catch (Exception e) {
e.printStackTrace();
}
return result;
}
}서블릿에서 전달된 ID로 SQL문의 조건식에 설정한 후 ID에 대한 회원 정보를 조회하여 그 결과를 true 또는 false로 반환
4. 데이터베이스에서 현재 등록된 아이디 확인
5. http://localhost:8090/pro16/test03/ajax3.html 요청 후 중복되는 아이디는 사용이 불가능하다고 표시된다.
6. 반면에 사용이 가능하다면 사용이 가능하다는 메시지와 함께 버튼이 비활성화된다.
728x90
'웹 개발 기초 > 자바 웹을 다루는 기술' 카테고리의 다른 글
| MVC 디자인 패턴 (1) | 2023.03.09 |
|---|---|
| 제이쿼리에서 JSON 사용하기 (0) | 2023.03.09 |
| 제이쿼리 Ajax XML 데이터 연동하기 (0) | 2023.03.09 |
| 제이쿼리 Ajax 사용하기 (0) | 2023.03.08 |
| 제이쿼리 Ajax 사용법 (0) | 2023.03.08 |