Jquery : Ajax로 아이디 중복체크 하기

 

 

 

 

 

Spring mvc 에서 Jquery 와 Ajax 를 이용한 간단한 아이디 중복체크 예제.

 

다음과 같이 html문서를 작성한다.

이메일을 입력하고 중복확인을 누르면 checkMsg를 통해 메세지를 출력해줄 것이다.

 

<label for="email">이메일 주소</label>
<input type="email" class="form-control" id="id" name="id" placeholder="이메일을 입력하세요"/>
<div id="checkMsg"></div>

<button type="submit" id="checkbtn" class="btn btn-default">중복확인</button>

 

 

 

Ajax 코드.

dataType 은 기본값이 JSON 으로, 따로 명시해주지 않아도 된다.

<script type="text/javascript">
    $(document).ready(function(){
        $('#checkbtn').on('click', function(){
            $.ajax({
                type: 'POST',
                url: '/mate/checkSignup',
                data: {
                    "id" : $('#id').val()
                },
                success: function(data){
                    if($.trim(data) == 0){
                        $('#checkMsg').html('<p style="color:blue">사용가능</p>');
                    }
                    else{
                        $('#checkMsg').html('<p style="color:red">사용불가능</p>');
                    }
                }
            });    //end ajax    
        });    //end on    
    });
    </script>

 

 

해당 url로 매핑된 컨트롤러 내용.

HttpServletRequest 를 통해 데이터를 받아올 수 있다.

userService 에서는 DB를 조회해 해당 id와 같은 값을 가진 행의 갯수를 반환한다.

 

   @ResponseBody
    @RequestMapping(value = "/checkSignup", method = RequestMethod.POST)
    public String checkSignup(HttpServletRequest request, Model model) {
        String id = request.getParameter("id");
        int rowcount = userService.checkSignup(id);
        
        return String.valueOf(rowcount);
    }