5. ajax를 활용하여 아이디 중복체크 하기

저도 Ajax는 아직 완벽하게 이해한게 아니라 시간이 좀 걸렸네요 ㅠㅠ 400에러 404에러 415에러 500에러 

안본게 없네요 ㅎㅎ

부족하더라도 정리해보겠습니다. ~

우선 동기와 비동기 방식이 있는데 음.. 

이해하기 쉽게 설명드리자면 .. 음 동기는 이어달리기 ? 비동기는 그냥 달리기 시합 이라고 생각하시면 

쉬울것같아요 

동기방식은 요청이 들어오면 응답을 받기전까지 다음 요청을 처리하지 않습니다. 

이어달리기에서 바톤을 받아야 다음 주자가 뛸 수 있는것과 비슷하죠 ??ㅎㅎㅎ

비동기는 그냥 달리기 시합과 같습니다 ~

그냥 다같이 뛰는거죠 먼져 도착한사람이 먼져 응답을 주는 식? 이렇게 하면 이해가 쉽겟죠 ?

흔한 예제에서는 

은행 업무를 많이 들고 있습니다.  

나의 잔고가 10만원인데 . 친구에게 10만원을 입금해줍니다. 그런데 중간에 자동이체로 후르륵 빠져나가면

큰일 나겠죠 ? 그래서 이럴땐 10만원이 이체완료 후에 자동이체가 진행되는 동기 방식을 쓰는거죠 

비동기는 엄청나게 매력적이에요 node.js를 잠깐 해봤는데 단일 페이지에서 이것저것 하는것은 

사용자로 하여금 엄청나게 매력을 줍니다 ㅠㅠ 하지만 저는 이게 왜이렇게 어려운지 한번만 이해하면 쉽다고하는데

ㅠㅠ 각설하고 코드로 설명드리겠습니다.

<script type="text/javascript">
//아이디 체크여부 확인 (아이디 중복일 경우 = 0 , 중복이 아닐경우 = 1 )
var idck = 0;
$(function() {
    //idck 버튼을 클릭했을 때 
    $("#idck").click(function() {
        
        //userid 를 param.
        var userid =  $("#userid").val(); 
        
        $.ajax({
            async: true,
            type : 'POST',
            data : userid,
            url : "idcheck.do",
            dataType : "json",
            contentType: "application/json; charset=UTF-8",
            success : function(data) {
                if (data.cnt > 0) {
                    
                    alert("아이디가 존재합니다. 다른 아이디를 입력해주세요.");
                    //아이디가 존제할 경우 빨깡으로 , 아니면 파랑으로 처리하는 디자인
                    $("#divInputId").addClass("has-error")
                    $("#divInputId").removeClass("has-success")
                    $("#userid").focus();
                    
                
                } else {
                    alert("사용가능한 아이디입니다.");
                    //아이디가 존제할 경우 빨깡으로 , 아니면 파랑으로 처리하는 디자인
                    $("#divInputId").addClass("has-success")
                    $("#divInputId").removeClass("has-error")
                    $("#userpwd").focus();
                    //아이디가 중복하지 않으면  idck = 1 
                    idck = 1;
                    
                }
            },
            error : function(error) {
                
                alert("error : " + error);
            }
        });
    });
});
 
 
</script>

우선 Ajax부터 작성했습니다.

var idck = 0; 우선 아이디 체크를했는지 안했는지 안했다면 회원가입이 불가하게 처리하기 위해

변수를 먼져 선언했습니다. 아이디 체크 여부에 따라 1 or 0 으로 처리할것입니다. 

컨트롤러

 @RequestMapping("/idcheck.do")
    @ResponseBody
    public Map<Object, Object> idcheck(@RequestBody String userid) {
        
        int count = 0;
        Map<Object, Object> map = new HashMap<Object, Object>();
 
        count = signupService.idcheck(userid);
        map.put("cnt", count);
 
        return map;
    }
 

Ajax사용을 위해 @ResponseBody 위를 어노테이션을 써줘야하구요 

JSON으로 넘어온 userid를 매개변수로 받습니다.

signupService.idcheck(userid); 쿼리를 먼져 확인해보면 

<select id="idcheck" parameterType="String" resultType="Integer">
      SELECT COUNT(*) FROM tbl_member
      WHERE
          userid = #{userid}
</select>

 

테이블에 저장되어 있는 userid의 COUNT를 가져옵니다.  

다시 컨트롤러에서 count = 1 이 될것입니다. 

이렇게 맵에 넣어서 다시 jsp로 넘겨줍니다. 다시 AJAX 작성한것을 보면 

if (data.cnt > 0) {    
        alert("이미 아이디가 존재합니다.");               
    //아이디가 존제할 경우 빨깡으로 , 아니면 파랑으로 처리하는 디자인
        $("#divInputId").addClass("has-error")
        $("#divInputId").removeClass("has-success")
        $("#userid").focus();
                    
                
} else {
         alert("사용가능한 아이디입니다.");
     //아이디가 존제할 경우 빨깡으로 , 아니면 파랑으로 처리하는 디자인
        $("#divInputId").addClass("has-success")
        $("#divInputId").removeClass("has-error")
        $("#userpwd").focus();
        //아이디가 중복하지 않으면  idck = 1 
        idck = 1;
}

컨트롤러에서 아이디가 중복이라면  cnt = 1 아니면 0이 넘어 왔을 때 

data.cnt > 0 이면 중복!

아니라면 사용 가능합니다!

설명을 어렵게 드린거 같네요 ㅠㅠ 

그리고 회원가입을 해봤더니 이전에 유효성 검사에서 버튼을 submit으로 만들었었습니다. 

아이디가 중복인데 ㅠㅠ 막 에러를 뿜뿜  primary key ㅠㅠ

그래서 유효성 검사에서 

if(confirm("회원가입을 하시겠습니까?")){
        if(idck==0){
            alert('아이디 중복체크를 해주세요');
            return false;
        }else{
        alert("회원가입을 축하합니다");
        $("#frm").submit();
        }
    }

마지막 부분에 이렇게 추가 했습니다.

이전 글을 보신분은 회원가입 버튼에 TYPE을 submit에서 button으로 바꿔주시고 

form 에 name="frm" id="frm"을 추가해주세요  

존재하는 아이디를 넣었을 때 count = 1 은 아이디가 존재 합니다.

아이디가 존재할 경우 빯갛게 표시 ㅎㅎㅎㅎ 

아이디가 존재하는데 회원가입을 진행했을 경우  

if(confirm("회원가입을 하시겠습니까?")){

        if(idck==0){

            alert('아이디 중복체크를 해주세요');

            return false;

        }else{

        alert("회원가입을 축하합니다");

        $("#frm").submit();

        }

    }

다시 정상적인 아이디를 입력했을 경우 

디비를 확인해보니 아주 이쁘게 잘 들어갔네요 ㅎㅎㅎㅎㅎㅎ

설명이 많이 부족합니다 .ㅠㅠ ajax는 추가로 따로 음...공부하고  스크립트 카테고리에 올리겠습니다 ㅠㅠ 

이것으로 회원가입에 필요한 비밀번호 암호화 , 유효성검사, 주소 자동완성, 아디디 중복검사를 했습니다. 

다음엔 게시판(공지사항) 을 만들겠습니다. 

공지사항에는 1. 게시글 등록 2.리스트 3. 수정 4. 삭제(CRUD)  5. 검색 6. 페이징  이렇게 다루겠습니다. 

코드가 필요하신 분은 댓글 달아주시면 git으로 코드를 올리겠습니다~