Servlet-JSP MVC07 (1) - Ajax를 활용한 id 중복확인

 

- memberRegister.jsp에서 ID를 중복확인을 할 것이다.

- 이때 비동기처리 기술인 Ajax를 활용하여 화면전환 없이 서버로부터 요청과 응답을 받을 것이다.

 

1. memberRegister.jsp에 id중복확인 버튼 추가 및 ajax 작성

<td><input type="button" value="중복체크" class="btn-warning" onclick="doubleCheck()"></td>

 

function doublecheck(){
    	 if($("#id").val() ==''){
    		 alert("아이디를 입력하세요");
    		 $("#id").focus();
    		 return
    	 }
    	 var id=$("#id").val();
    	 $.ajax({
    		 url : "<c:url value='/memberDoubleCheck.do'/>",
    		 type : "POST",
    		 data : {"id" : id},
    		 success :dbCheck, //함수(callback함수)
    		 error: function(){alert("error");}
    		 
    	 });
    }

*el과 제이쿼리를 차이점 -> EL은 저장소(request.session..)에 저장된 값을 읽어오는 것 따라서 

                                        -> 제이쿼리는 태그 속성등을 통해서 클라이언트의 입력을 읽을 수 있음

 

2. callback() 함수 작성 

function dbCheck(data){
    	 if(data != "NO"){
    		 alert("중복된 아이디 입니다.");
    		 $("#id").focus();
   
    	 }else{
    		 alert("사용가능한 아이디 입니다.");
    		 $("#id").focus();
    	 }
     }

> 콜백함수는 ajax통신의 결과로 서버의 응답을 받는 함수입니다.

 - memberDoubleCheck.do에서 ajax와 통신하고 넘긴 return값을 받는다.

  - DB를 통해 id 중복검사를 한 뒤에 넘어온 응답을 통해 중복된 아이디인지 아닌지 검사한다.

 

3. 컨트롤러 및 DAO 메서드 추가 

	@Override
	public String requestHandler(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		
		System.out.println("hi");
		String id = request.getParameter("id");
		MemberDAO dao = new MemberDAO();
		String dbDouble = dao.memberCheck(id);
		//sql결과로 YES or NO거 dbDouble에 담김
		response.getWriter().print(dbDouble);
		//ajax()함수에 callback함수(dbCheck)로 응답이 된다.
		
		return null;
	}

DAO 메서드 

public String memberCheck(String id) {
	 SqlSession session = sqlSessionFactory.openSession();
     String dbid = session.selectOne("membercheck", id);
     session.close();
     String isDouble="NO";
	  if(dbid != null) {
		  isDouble="YES";
	  }
	return isDouble;
}

 

참고자료:

나프2탄(인프런) - 박매일

https://www.inflearn.com/course/%EB%82%98%ED%94%84-mvc-2

[NarP Series] MVC 프레임워크는 내 손에 [나프2탄] - 인프런 | 강의