Spring ajax,@ResponseBody로 id 중복체크 기능 구현하기

 

 

우리는 지금까지 /join/regist.wow 까지 가서 아이디가 DB에 있는 아이디이면

"중복된 아이디입니다" 라는 메세지를  보여주는 방식으로 회원가입을 했지만

사실,아이디의 중복 여부는  "아이디 중복 확인" 버튼을 눌러서 alert창으로

"중복된 아이디입니다"  또는 "사용할 수 있는 아이디입니다" 같은

메세지를 띄우는 방식으로 아이디 중복체크를 확인하는게 일방적이다.

이 때 아이디중복체크를 위해  현재 step2.jsp 화면이 바뀌지 않고

단순히 아이디 중복체크확인만 하기 위해 ajax를 이용해 비동기 요청을 한다.

이 ajax로 요청한 비동기 요청도 DispatcherServlet의 Controller가 처리한다.

 

먼저 step2.jsp를 수정하자.  테이블의 ID 부분에 "아이디 중복 확인" 버튼을 추가하자.

<tr>
    <th>ID</th>
    <td><form:input path="memId" cssClass="form-control input-sm" />
        <form:errors path="memId" />
        <button onclick="return false;" type="button" id="idCheck">아이디중복확인</button>
    </td>
</tr>

 

 

 

그리고 button을 눌렀을 때 ajax로 서버에 id중복체크 해달라는 요청을 보내자.

<script type="text/javascript">
	$(document).ready(function(){
    	var isIdChecked=false; //중복체크했을 땐 true로 변경
		$("#idCheck").on("click", function(e){
			e.preventDefault();   //form태그안의 있는 버튼이라 그냥 submit되는거 방지
			$.ajax({
				url : "<c:url value='idCheck.wow'  />" 
				,data : {"id" : $("input[name='memId']").val()}
				,success :function(data){
                                    if(data=="사용가능") isIdChecked=true;  
                                    alert(data);
				},error : function(req,status,err){
					console.log(req);
				}
			}); //ajax
		});// idCheck
	}); //ready
</script>

 

그 다음 MemberJoinController에 다음과 같은 메소드를 추가하자.

@RequestMapping(value = "/join/idCheck.wow" ,produces = "text/plain;charset=utf-8")
@ResponseBody 
public String idCheck(String id)  {
    MemberVO member=null;
    try {
        member = memberService.getMember(id);
        return "중복";
    } catch (BizNotFoundException e) {
        return "사용가능";
    }	
}

여기서 @ResponseBody를 붙이고, @RequestMapping의 produces속성에서의 설정값에 의해 

return 값이 그대로 ajax의 success함수의 data가 된다.

그래서 현재 DB의 있는 값에 따라 다음과 같은  alert화면이 나오게 된다.

 

 

 

 

 

또  id를 바꿀 때 마다 id중복체크를 다시 해야한다.

마지막으로 id중복체크를 했을 때만 다음버튼을 눌러서 다음단계로 갈 수 있도록 

다음버튼 이벤트를 작성하자.

$(document).ready(function(){
    var isIdChecked=false; //중복체크했을 땐 true로 변경
 	// id중복체크확인버튼 이벤트


    $("input[name='memId']").on("change", function(e){
        isIdChecked=false;
    });//memId값 바뀔 때마다 


    //form태그내의 버튼 클릭   (일부러 idCheck, email인증 버튼은 type을 button으로 했음. 어찌됐든 다음버튼 클릭 이벤트가 되도록 jquery 잘 쓰기)
        $("button[type=submit]").click(function(e) {
            e.preventDefault();
            if(isIdChecked){
                $("form").submit();
            }else {
                alert("id 중복체크를 해주세요");
            }
       });// 다음버튼
});//ready