[Ajax] - Ajax와 Servlet 이용 아이디 중복 체크하기
○ Ajax와 Servlet 이용 아이디 중복 체크하기 |
Ajax와 Servlet, DAO 이용하여 DB에서 아이디 중복 체크하기 // index.jsp (Ajax 부분) <head> // 중복체크 버튼 AJAX <-> 서블릿으로 보내서 결과 가져오기 <script type="text/javascript"> function registerCheckFunction(){ // userID 변수에 userID의 입력된 값을 가져오게 함 var userID = $('#userID').val(); $.ajax({ type: 'POST', // GET or POST 전송방법 url: './UserRegisterCheckServlet', // 이쪽으로 보낸다(호출URL) data: {userID: userID}, // userID 이름에 userID 데이터 값을 넣어서 보낸다 success: function(result){ // 만약 성공적으로 수행되었다면 result로 값반환 if(result == 1){ // id가 checkMessage인 것에 아래 텍스트 출력 $('#checkMessage').html('사용할 수 있는 아이디입니다.'); } else { $('#checkMessage').html('사용할 수 없는 아이디입니다.'); } // id 가 checkModal인 모달함수 실행시켜서 모달 실행시키기 위해 $('#checkModal').modal("show"); } }) } </head> // index.jsp (폼 부분 + 모달 부분) <body> <!-- 아이디 입력 폼 부분 --> <tbody> <tr> <td style="width: 120px;"><h5>아이디</h5></td> <td><input class="form-control" type="text" id="userID" maxlength="20"></td> <td style="width: 120px;"><button class="btn btn-primary" onclick="registerCheckFunction();" type="button">중복체크</button></td> </tr> </tbody> <!-- 중복체크를 위한 알림메시지 모달 --> <div class="modal fade" id="checkModal" tabindex="-1" role="dialog" aria-hidden="true"> <div class="vertical-alignment-helper"> <div class="modal-dialog vertical-align-center"> <!-- 패널 출력 성공 메시지냐 오류 메시지에 따라 --> <div class="modal-content panel-info"> <div class="modal-header panel-heading"> <button type="button" class="close" data-dismiss="modal"> <span aria-hidden="true">×</span> <span class="sr-only">Close</span> </button> <h4 class="modal-title"> 확인 메시지 </h4> <div class="modal-body" id="checkMessage"> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary" data-dismiss="modal">확인</button> </div> </div> </div> </div> </div> </div> </body> // UserRegisterCheckServlet.java (아이디 중복체크 서블릿) @WebServlet("/UserRegisterCheckServlet") public class UserRegisterCheckServlet extends HttpServlet { private static final long serialVersionUID = 1L;
public UserRegisterCheckServlet() { super(); } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // 한글 설정 위한 request.setCharacterEncoding("UTF-8"); response.setContentType("text/html; charset=UTF-8"); String userID = request.getParameter("userID"); // 해당 체크함수는 숫자 결과값 나오기 때매 공백 추가해서 문자열 추가 "" // 해당 결과가 0, 1 나온 것을 보내니 ajax에서 결과값으로 받아서 처리 response.getWriter().write(new UserDAO().registerCheck(userID) + ""); } } // UserDAO.java public class UserDAO { private Connection conn; public UserDAO() { // 생성자를 통한 db 연결 try { String dbURL = "jdbc:mysql://localhost:3306/register"; String dbID = "root"; String dbPW = "wlgns930"; Class.forName("com.mysql.jdbc.Driver"); conn = DriverManager.getConnection(dbURL, dbID, dbPW);
} catch(Exception e) { e.printStackTrace(); } } // 입력받은 유저 아이디 디비에서 있는지를 체크해서 값 반환 public int registerCheck(String userID) { PreparedStatement pstmt = null; ResultSet rs = null; String SQL = "select * from user where userID = ?"; try { pstmt = conn.prepareStatement(SQL); pstmt.setString(1, userID); rs = pstmt.executeQuery(); if(rs.next() || userID.equals("")) { // 결과가 있다면 return 0; // 이미 존재하는 아이디 } else { return 1; // 가입 가능한 아이디 } }catch(Exception e) { e.printStackTrace(); } finally { try { if(rs != null) rs.close(); if(pstmt !=null) pstmt.close(); } catch(Exception e) { e.printStackTrace(); } } return -1; // 데이터베이스 오류 } } // UserDTO.java public class UserDTO { String userID; String userPassword; String userName; int userAge; String userEmail; String userGender; // 오른쪽마우스 - source - getter/setter 한다 } 모달부분이 bootstrap 버전이 낮아 이쁘지 않게 디자인되었다 ! |
'Servlet' 카테고리의 다른 글
| [Ajax] - TextArea 게시물 및 댓글 수 실시간 출력하기 (0) | 2018.11.06 |
|---|---|
| [Servlet] - 서블릿에서 Session 사용하기 (0) | 2018.07.23 |
| [Javascript] - javascript 이용하여 패스워드 불일치 체크하기 (0) | 2018.06.29 |
| [Servlet] - 서블릿 활용한 회원가입 구현하기 (0) | 2018.06.29 |
| [Servlet] - *.do 서블릿과 FrontController 패턴 (0) | 2018.06.27 |