@RequestMapping("idCheck.me")
public void idCheck(String checkId) {
System.out.println(checkId);
}
👉🏻 현재 회원가입 폼에서 아이디가 5글자 이상일 때만 요청 들어감
💻 MemberServiceImpl
@Override
public int idCheck(String checkId) {
return memberDao.idCheck(sqlSession, checkId);
}
💻 MemberDao
public int idCheck(SqlSessionTemplate sqlSession, String checkId) {
return sqlSession.selectOne("memberMapper.idCheck", checkId);
}
💻 member-mapper.xml
<select id="idCheck" parameterType="string" resultType="_int">
SELECT COUNT(*)
FROM MEMBER
WHERE USER_ID = #{checkId}
</select>
💻 MemberController
@ResponseBody
@RequestMapping(value="idCheck.me", produces="text/html; charset=UTF-8")
public String idCheck(String checkId) {
// System.out.println(checkId);
int count = memberService.idCheck(checkId);
/*
if(count > 0) { // 이미 존재하는 아이디 => 사용 불가능 (NNNNN)
return "NNNNN";
} else { // 사용 가능 (NNNNY)
return "NNNNY";
}
*/
// 위와 같이 if문을 써도 무방하나 삼항연산자로도 표현 가능함!
return (count > 0) ? "NNNNN" : "NNNNY";
}
💻MemberEnrollForm
<script>
$(function() {
// 아이디를 입력받는 input 요소 객체를 변수에 담아두기 => keyup 이벤트 걸기
var $idInput = $("#enrollForm input[name=userId]");
$idInput.keyup(function() {
// 우선 최소 5글자 이상으로 아이디값이 입력되어 있을 때만 ajax 요청
// => 쿼리문의 갯수가 한정되어 있을 수 있기 때문
if($idInput.val().length >= 5) {
// ajax를 요청하여 중복체크
$.ajax({
url : "idCheck.me",
data : {checkId : $idInput.val()},
success : function(result) {
// console.log(result);
if(result == "NNNNN") { // 사용 불가능
// 빨간색 메시지 출력
$("#checkResult").show();
$("#checkResult").css("color", "red").text("중복된 아이디가 존재합니다. 다시 입력해 주세요.");
// 사용 가능 아이디를 쳤다가 다시 불가능한 아이디를 친다면 버튼 비활성화
$("#enrollForm button[type=submit]").attr("disabled", true);
} else { // 사용 가능
// 초록색 메시지 출력
$("#checkResult").show();
$("#checkResult").css("color", "green").text("멋진 아이디네요!");
// 버튼 활성화
$("#enrollForm button[type=submit]").attr("disabled", false);
}
},
error : function() {
console.log("아이디 중복 체크용 ajax 통신 실패!");
}
});
} else { // 5글자 이하라면? 혹은 사용자가 5글자 이상의 아이디를 쳤다가 다시 5글자 미만으로 줄인다면?
// 버튼 비활성화 및 메시지 내용 숨기기
$("#checkResult").hide();
$("#enrollForm button[type=submit]").attr("disabled", true);
}
});
});
</script>
