View
우선 기본적으로 익힐 때 가장 머리 아팠었던 Ajax 부분이다.
천천히 코드를 따라 가 보자.
우선 DAO에서 confirm 메서드를 하나 만들었다.
스프링을 다 익히고 나니 DAO 란 표현이 좀 낯선 건 여담.......
public int confirmID(String memid){
int x=-100;
try{
con=getCon();
pstmt=con.prepareStatement("select memId from tbmember where memId=?");
pstmt.setString(1, memid);
rs=pstmt.executeQuery();
if(rs.next()){
x=1; //사용 중인 아이디
}else{
x=0; //사용 가능한 아이디
}//else-end
}catch(Exception ex){
System.out.println("confirmID() 예외: "+ex);
}finally{
try{
if(rs!=null){rs.close();}
if(pstmt!=null) {pstmt.close();}
if(con!=null){con.close();}
}catch(Exception ex2){}
}//finally-end
return x;
}//confirmID end우선 반환해야 하는 x를 오류로도 뜰 수 없는 숫자(-100) 로 설정해 두고, 쿼리를 돌려 DB 에 해당 데이터(memId)가 있는지 확인한다.
여기에서의 memId 는 사용자가 입력한 input 으로 들어오는 값이다.
예를 들어, 내가 회원가입에서 'hyper' 를 쳤다면, hyper 가 해당 메서드의 매개변수로 들어오는 것이다.
그리고 쿼리는 이렇게 돌아가게 된다.
select memId
from tbmember
where memId='hyper';결과 값을 받는 변수로 rs를 선언했고, 쿼리 실행 구문은 pstmt.executeQuery(); 문장이다.
그리고 if 문으로 rs 값이 있는지 없는지 확인하는데, rs.next()의 뜻은 데이터베이스를 한 번 스윽 스캔해서 넥스트에 값이 있는지 없는지 확인하게끔 해 준다.
그래서 사용이 불가능한 값, 즉 DB 에 있는 값은 x=1 로 주고, DB 에 없는 값, 사용이 가능한 아이디는 0 으로 주어 리턴한다.
그리고 confirmID.jsp 를 만들어 해당 값을 json 타입으로 넘겨 준다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"
import="member.*"
%>
<%-- confirmID.jsp --%>
<%
String memId=request.getParameter("memId");
MemberDAO dao=MemberDAO.getInstance();
int x=dao.confirmID(memId);
%>
{
"x":<%=x%>
}이렇게 작성해 두면 memID 를 FORNT input 에서 받고, dao 에 있는 메서드 (위에서 작성한 if 문)에 memId 를 매개변수로 넘겨 데이터 유효성을 체크하여 x 값을 반환해 준다.
그냥 쉽게 말해서 사용이 가능하면 x 값이 0 이 되고, 사용이 불가능하면 1 이 될 것이다.
그러고서 본격적으로 프론트로 넘어와야 한다.
우선 FROM 아래에 잘못된 ID 데이터가 넘어가지 않도록 디폴트로 false 값을 심어 준다.
<input type="hidden" name="idChkResult" id="idChkResult" value="false">그리고 나는 테이블로 프론트를 구성했기 때문에 <tr> <td> 등의 테이블 태그가 보일 텐데, 해당 부분을 차치하고 속성 옵션을 보자.
<tr>
<td>ID</td>
<td>
<input type="text" name="memId" id="memId" size="30"
placeholder="아이디를 입력해 주세요." class="input_id"><br>
<font id="checkId" size="2"></font>
</td>
</tr>name과 ID를 memId로, class 를 input_id 로 둔 것을 확인하면 된다.
또한 DB에 데이터가 있는지, 없는지에 따라 나타낼 문장을 font id=checkID 로 주어 나타낼 것이다.
JAVASCRIPT 구성
$(function(){
$('#memId').on('blur',function(){
if($('#memId').val()==''){
$('#checkId').html('아이디를 입력하세요.');
$('#checkId').attr('color','red');
$('#memId').focus();
return false;
}else{
$.ajax({
type:"POST",
url:"confirmID.jsp",
data:"memId="+$('#memId').val(),
dataType:"JSON",
success:function(data){
if(data.x==1){
$('#checkId').html('사용할 수 없는 아이디입니다.');
$("#idChkResult").val("false");
$('#checkId').attr('color','red');
$('#memid').foucs();
}else{
$('#checkId').html('사용 가능한 아이디입니다.');
$("#idChkResult").val("true");
$('#checkId').attr('color','green');
$('#idck').val('true');
$('#memPw').focus();
}
}//success-end
})//ajax-end
}//else-end
})//inner function-end
})//function-end우선 제일 else 위에 있는 구문은 ID 를 입력하지 않았을 경우 보이게 만드는 요소이니 넘어가자.
url 로 json 데이터를 받아야 하는 confirmID.jsp 를 작성해 준다.
또한 data 부분은 input id=memID 에 적혀진 값으로 confrimID.jsp 로 넘어갈 것이다.
그러고서 해당 값이 if 문 메서드에 들어가 DB에 있는지 없는지 확인한 후, (DAO 에 작성된 메서드)
DB에 값이 있으면 1, 없으면 0 으로 반환해 줄 것이다.
값이 있으면 사용하지 못하는 아이디이므로 data.x==1 일 경우 <font id="checkID"> 는 사용할 수 없는 아이디인 것을 표기해 주고, data.x 가 1 이 아닐 경우 사용 가능한 아이디라 표현해 준다.
그리고 form 아래에 #idcheckResult 값을 false 로 잡아 두었기 때문에, 만약 사용 가능한 아이디라면 true 로 밸류를 변경해 준다.
이것으로 Ajax 즉시 비교는 끝!
