회원가입을 할때 DB에 있는 아이디값과 중복으로 가입이 안되는 게 정상이어야 한다. 같은 아이디가 여러개 있으면 이상하자나..?
그래서 회원가입시 아이디 중복체크를 해줘야한다. 중복체크 버튼을 눌러서 확인 할 수도 있지만 ajax를 통해 실시간으로 체크해 주는 기능을 구현 해보려고 한다.
Join.jsp
<head>
<style>
.id_ok{
color:#008000;
display: none;
}
.id_already{
color:#6A82FB;
display: none;
}
</style>
</head>
<label for="address2">아이디</label>
<input type="text" id="id" name="id" oninput = "checkId()" >
<!-- id ajax 중복체크 -->
<span class="id_ok">사용 가능한 아이디입니다.</span>
<span class="id_already">누군가 이 아이디를 사용하고 있어요.</span>
먼저 view 에서 아이디를 입력하는 곳에 oninput이벤트를 설정 해 준다.
oninput 이벤트는 값을 입력 할 때 마다 바로바로 데이터를 확인 해 준다.
그리고 style 안에 색깔을 지정해주고 none 으로 숨겨놓는다.
js
function checkId(){
var id = $('#id').val(); //id값이 "id"인 입력란의 값을 저장
$.ajax({
url:'./idCheck', //Controller에서 요청 받을 주소
type:'post', //POST 방식으로 전달
data:{id:id},
success:function(cnt){ //컨트롤러에서 넘어온 cnt값을 받는다
if(cnt == 0){ //cnt가 1이 아니면(=0일 경우) -> 사용 가능한 아이디
$('.id_ok').css("display","inline-block");
$('.id_already').css("display", "none");
} else { // cnt가 1일 경우 -> 이미 존재하는 아이디
$('.id_already').css("display","inline-block");
$('.id_ok').css("display", "none");
alert("아이디를 다시 입력해주세요");
$('#id').val('');
}
},
error:function(){
alert("에러입니다");
}
});
};
그리고 js에서 idCheck 값을 보내고 0또는 1을 받아온 다음
cnt가 0 이면 사용 가능한 아이디 라는 값을 노출시키고
1이면 아이디를 다시 입력해주세요 라는 값을 노출 시킨다.
Contorller
@Controller
public class MemberController {
@Autowired
private MemberService memberService;
//아이디 중복체크
@PostMapping("/idCheck")
@ResponseBody
public int idCheck(@RequestParam("id") String id) {
int cnt = memberService.idCheck(id);
return cnt;
}
}
json 값을 가져오니 @ResponseBody를 붙이고
@RequestParam 어노테이션을 이용해 id값을 받아와서 id값에 저장한다.
Service, ServiceImple
public interface MemberService {
// 아이디 중복체크
public int idCheck(String id);
@Service
public class MemberServiceImple implements MemberService {
@Autowired
private MemberMapper mapper;
//아이디 중복체크 mapper 접근
@Override
public int idCheck(String id) {
int cnt = mapper.idCheck(id);
System.out.println("cnt: " + cnt);
return cnt;
}
}
mapper
public interface MemberMapper {
// 아이디 중복체크
public int idCheck(String id);
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="패키지명.인터페이스">
<!-- 아이디 중복 체크 -->
<select id="idCheck" parameterType="String" resultType="int">
SELECT COUNT(id) FROM T_MEMBER WHERE id= #{id}
</select>
마지막으로 테이블에 있는 id를 검색해준다. 이게 완료가 되면
아래처럼 결과가 나온다.
마지막 부분에 Mapper 말고 DAO 로 해도 가능한걸까요,,,?!