6. SpringMVC - Ajax 통신을 통해 아이디 중복 체크 하기

jsp

 

- form 태그 안에 아이디를 입력 받을 수 있도록 한다. 

 

<form> 
. .생략 ..
<label for="username" class="sr-only">ID or NickName</label>
<input type="text" id="username" name="userid" class="form-control" placeholder="ID & NickName" required autofocus>
<input type="hidden" id="idCheck1" value="0">
. .생략 ..
</form>

 

 

 

 

🤍 Ajax 통신전

- Ajax통신을 위해 document ready를 해준다. 

- 간단하게 조회만 하고 돌아올 것이기 때문에 POST방식이 아닌 GET 방식으로 요청을 보냈다. 

- keyup 이벤트를 통해 키보드로 입력후 Ajax가 실행하도록 설정했다. 

- form에서 입력 받은 값을 변수로 지정하여 key-value 형태로 /member/idcheck 경로로 보낸다. 

 

 

🤍 Ajax 통신후

- 통신에서 받아온 정수형의 result 값이 1일 경우에는 DB에서 사용자가 입력한 값이 존재한다는 뜻으로 "이미 사용중인 아이디입니다. " 라는 메세지와 함께 설정한 hidden값을 N으로 바꿔준다. 

- 그외에 1이 아닌 경우는 DB에 사용자가 입력한 값과 일치하는 값이 없다는 뜻으로 즉, 사용 가능한 아이디이다. 그래서 hidden에 Y로 값을 지정해준다. → submit 제출시, N일 경우 중복값이므로 form을 제출할 수 없게 제어하기 위함이다. 😎 💫코드리뷰를 하면서 생각해보니 Y의 값은 따로 설정할 필요가 없을 듯 하다. 

 

	$(document).ready(function(){
		
		//alert("얌");
		
		$('#username').keyup(function(){
			let userid = $('#username').val();
			$.ajax({
				url:"/member/idcheck",
				type:"get",
				data : {
						userid: userid
				},
				success : function(result){
					if(result == 1){
						$("#id_feedback").html('이미 사용중인 아이디입니다.');
						$("#id_feedback").attr('color','#dc3545');
						$("#idCheck1").attr("value", "N");
					} else{
						$("#id_feedback").html('사용할 수 있는 아이디입니다.');
						$("#id_feedback").attr('color','#72FBC6');
						$("#idCheck1").attr("value", "Y");
					} 
				},
				error : function(){
					alert("서버요청실패");
				}
			});
				 
		});
   
   
   .. 생략 
   
   
});   // document.ready

 

 

 

 

 

 

요청을 처리하는 Controller 

 

 

 

- @RequestParam은 Get 요청 파라미터 전송 방식, HTML form 전송 방식을 사용할 때 조회할 수 있는 방법

- userid 라는 이름으로 넘어온 값을 가지고 service 실행

- 정수형 result를 반환 

@GetMapping("/idcheck")
	@ResponseBody
	public int idCheck(@RequestParam("userid") String userid) throws Exception {
		int result = service.idCheck(userid);
		return result; 
	}

 

 

 

 

 

Service,Impl / DAO, Impl

 

 

//아이디 중복 체크 
public int idCheck(String userid) throws Exception;

 

 

// 아이디 중복 체크
@Override
public int idCheck(String userid) throws Exception {
	return dao.idCheck(userid);
}

 

 

//아이디 체크 
public int idCheck(String userid) throws Exception;

 

 

//아이디 체크
@Override
public int idCheck(String userid) throws Exception {
	return sqlSession.selectOne(NAMESPACE+".idCheck", userid);
		}

 

 

 

 

mapper

 

 

- userid를 where절에 넣어 조회한다. 일치하는 결과가 있을 경우 1, 없을 경우 0을 반환한게 된다. 

 

	<!-- 아이디 체크 -->
	<select id="idCheck" resultType="int">
		select count(*) from tbl_member
		where userid =#{userid}
	</select>

 

 

 

 

jsp

 

 

- 통신은 받아온 결과로 form 제출시 제어해준다. 

.. 생략

$('#join').submit(function() { 
			
			if($('#idCheck1').val() == 'N') {
				return false;
			}
			if($('#idCheck2').val() == 'N') {
				return false;
			}
			
		});
        
});    // document.ready

 

 

 

 

 

 

 

 

 

 

 

 

참고 

@RequestParam https://m42-orion.tistory.com/114?category=1085496