[ Spring ] 아이디 중복 체크 ajax 사용 - (1) 회원가입

 

아이디  중복확인

 

1. 컨트롤러에서 회원가입 페이지로 이동.

📑 MemberController.java

@Autowired
MemberMapper memberMapper;
	
@RequestMapping("/memJoin.do")
public String memJoin() {
    return "member/join";  // join.jsp
}

1) @Autowired  데이터 베이스 관련 메서드를 실행하는 객체(MemberMapper.java)를 연결

2) @RequestMapping  "URI : memJoin.do " 요청이 왔을때,  WEB-INF/views/memeber/join.jsp 페이지로 이동

 

📑 MemberMapper.java

@Mapper //- Mybatis API
public interface MemberMapper {	 
	public Member registerCheck(String memID);
	public int register(Member m); //회원등록( 성공1, 실패0 )
	...
}

📑 MemberMapper.xml

<mapper namespace="kr.board.mapper.MemberMapper">
  
  <select id="registerCheck" resultType="kr.board.entity.Member">
    select * from mem_tbl where memID=#{memID}
  </select>
  ...

 

2 . 회원가입 View 화면에서 아이디 체크 버튼 클릭시 동작

📑 join.jsp

- html : 이벤트실행 버튼  onclick="registerCheck()"

<tr>
     <td style="width: 110px; vertical-align: middle;">아이디</td>
     <td><input id="memID" name="memID" class="form-control" type="text" maxlength="20" placeholder="아이디를 입력하세요."/></td>
     <td style="width: 110px;"><button type="button" class="btn btn-primary btn-sm" onclick="registerCheck()">중복확인</button></td>
</tr>

 

- javascript : registerCheck()  실행되는 스크립트

 function registerCheck(){
   var memID=$("#memID").val();
   $.ajax({
       url : "${contextPath}/memRegisterCheck.do",
       type : "get",
       data : { "memID" : memID},
       success : function(result){
       	// 자바에서 결과값 전달 받아서 실행
           // 중복유무 출력(result=1 : 사용할수있는 아이디, 0 : 사용할수없는 아이디)
           ...
       },    	   
       error : function(){ alert("error"); }    	   
   });    	
}

1)  <input id="memID"> 태그에 입력한 val 값을 가져와서 변수에 대입한다.

2) ajax를 이용해 자바에 데이터를 전달하고 값을 받아온다.

- url : memRegisterCheck.do로 맵핑 되어있는 java 메서드

- type:  get  메서드 파라미터로 값 전달

- data : { "memID" : html <input id="memID">에서 받아왔던 val 값을 넣는다 }

- success : JAVA에서 결과값을 1로 전달 받았을 시 중복된 아이디값이 없다. , 0값이 넘어왔을시 중복된 아이디가 있어 있다.

- error : JAVA 메서드에서 오류가 났을시 출력

 

 

3 . 자바로 데이터 전달

📑 MemberController.java

@RequestMapping("/memRegisterCheck.do")
public @ResponseBody int memRegisterCheck(@RequestParam("memID") String memID) {
    Member m=memberMapper.registerCheck(memID);
    if(m!=null || memID.equals("")) {
        return 0; //이미 존재하는 회원, 입력불가
    }
    return 1; //사용가능한 아이디
}

1) ajax 에서 전달 받은 데이터를 처리할 메서드 생성

- @RequestMapping("/memRegisterCheck.do") : url 

- @ResponseBody : body(html)에서 전달 받은 내용을 사용 

- int 형으로 전달 (실행 아이디값 유무 결과)

- @RequestParam("memID") : get 파라미터로 전달 받은 값을 가져와서 사용. 

 

2)  Member m=memberMapper.registerCheck(memID); 

- 일치하는 객체가 있으면 객체를 반환 없으면 null 반환  

- if 문으로 체크하여 jsp 파일 success  에 값 전달

 

 

4 .  자바에서 회원가입 View 화면으로 결과값(result) 전달

📑 join.jsp

1) javascript : 값이 전달되면 모달 show을 보여주고 안에 실행 값에 대한 텍스트 변경.

 success : function(result){
   // 중복유무 출력(result=1 : 사용할수있는 아이디, 0 : 사용할수없는 아이디)
   if(result==1){
      $("#checkMessage").html("사용할 수 있는 아이디입니다.");
      $("#checkType").attr("class","modal-content panel-success");
   }else{
      $("#checkMessage").html("사용할 수 없는 아이디입니다."); 
      $("#checkType").attr("class","modal-content panel-warning");
   }
   $("#myModal").modal("show");
}

 

2) html : 아이디 체크 모달 

<div id="myModal" class="modal fade" role="dialog" >
  <div class="modal-dialog">	
    <!-- Modal content-->
    <div id="checkType" class="modal-content panel-info">
      <div class="modal-header panel-heading">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">메세지 확인</h4>
      </div>
      <div class="modal-body">
        <p id="checkMessage"></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>	
  </div>
</div>