[13] 아이디 중복체크 : Ajax 활용

아이디 중복체크

비동기식 통신방식으로 페이지 리로딩 없는 아이디 중복체크 기능을 만들어보자

Ajax 공부하러가기

---

 

타사이트의 아이디중복확인

<<joinAjax 클릭시 뜨는 상세창>>

1. 네이버 회원가입 페이지에서 F12의 네트워크 탭을 열어둔 채로 임의의 아이디를 입력해보자.
2. 입력창에서 포커스 아웃되는 순간 아이디 중복확인을 하는 joinAjax 처리가 1줄 생김 확인 >> 클릭
3. 상세창의 응답탭에서 NNNNN(중복있을경우)과 NNNNY(중복없을경우)으로 응답데이터를 넘기는것을 확인할수 있음NNNN일경우 중복아이디가 있음 , NNNNY일 경우 멋진아이디네요 라고 프린트함을 확인할 수 있다.
4. 해당 로직을 적용해서 아이디 중복확인 기능을 넣어보자

 

 

STEP1) memberEnrollForm.jsp (수정)

• 회원가입버튼을 비활성화 시킨다.(아이디 중복확인후 활성화)
• 중복확인버튼 클릭 시 사용자가 입력한 아이디값을 넘겨서 조회요청(존재여부확인) 후 응답데이터 돌려받기
  1) 사용불가능(NNNNN) => alert로 메세지 출력 및 재입력유도
  2) 사용가능 (NNNNY) => 진짜 사용할건지 의사 물어보기 (confirm창)
     >>사용하겠다 : 더이상 아이디 수정 못하게 처리, 회원가입버튼 활성화
     >>사용안하겠다 : 다시 입력하도록 유도
• 객체.removeAttr("속성") : 해당 속성 없애는 메소드

* 아이디 : <input type="text" name="userId" required>
<button type="button" onclick="idCheck()">중복확인</button></td>

.....
<button type="submit" disabled>회원가입</button>
<script>
    function idCheck(){
        // 아이디 입력하는 input요소 객체 담아두기
        // 제이쿼리로 담았으면 변수명에 $붙이기
        const $idInput = $('#enroll-form input[name=userId]');
        $.ajax({
            url:"<%=contextPath%>/idCheck.me",
            data:{checkId:$idInput.val()},
            success:function(result){
                if(result == "NNNNN"){ // 사용불가능
                    alert("이미 존재하거나 탈퇴한 회원의 아이디입니다.");
                    $idInput.focus();
                }else { //사용가능
                    //confirm은 사용자가 확인누를시 true, 취소시 false반환
                    if(confirm("사용가능한 아이디입니다. 정말로 사용하시겠습니까?")) {
                        //아이디 변경 못하게 막기
                        $idInput.attr("readonly", true);
                        //회원가입버튼 활성화하기 
                        $('#enroll-form :submit').removeAttr("disabled");
                    }else {
                        $idInput.focus();    
                    }
                }
            },
            error:function(){
                console.log("아이디 중복체크용 ajax 통신 실패");
            }
        }
</script>

 

 

STEP2) AjaxIdCheckController.java

• 생성위치 : com.br.member.controller
  서블릿/매핑값 idCheck.me
• ajax 요청에 대한 서블릿은 응답페이지를 돌려줘서는 안된다.
  따라서 명칭 앞에 ajax를 붙인다.

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    String checkId = request.getParameter("checkId");
    int count = new MemberService().idCheck(checkId);
    if(count>0) { 
        //존재하는 아이디가 있는 경우 == 사용불가능 => 응답데이터는 NNNNN
        response.getWriter().print("NNNNN");
    }else {
        //존재하는 아이디가 없는 경우 == 사용가능 => 응답데이터는 NNNNY
        response.getWriter().print("NNNNY");
    }
}

 

 

STEP3) member-mapper.xml (수정)

• 아이디를 찾아보는 sql문을 만든다.
  COUNT(*)를 써서 아이디가 있으면 1, 없으면 0을 반환하도록 한다.

<entry key="idCheck">
	SELECT
	       COUNT(*) "COUNT"
	  FROM MEMBER
	 WHERE USER_NO=?  
</entry>

 

 

STEP4) MemberService.java (수정)

• idCheck(checkId) 메소드 생성

public int idCheck(String checkId) {
    Connection conn = getConnection();
    int result = new MemberDao().idCheck(conn, checkId);
    close(conn);
    return result;
}

 

 

STEP5) MemberDao.java (수정)

• idCheck(conn, checkId) 메소드 생성

public int idCheck(Connection conn, String checkId) {
    int count = 0;
    PreparedStatement pstmt = null;
    ResultSet rset = null;
    String sql = prop.getProperty("idCheck");
    try {
        pstmt = conn.prepareStatement(sql);
        pstmt.setString(1, checkId);
        rset = pstmt.executeQuery();
        if(rset.next()) {
            count = rset.getInt("count");
        }
    } catch (SQLException e) {
        e.printStackTrace();
    } finally {
        close(rset);
        close(pstmt);
    }
    return count;
}