- 어려운 부분이 없는 과제인데 또 중간에 변수 선언하는걸 깜빡해서 시간을 날렸다
- 천천히 잘 찾아보는게 중요할듯 하다
html영역
<tr>
<td>* 아이디</td>
<td><input type="text" id="memberId" name="memberId">
</td>
<td id="msg"></td>
</tr>- 다른 부분은 상관없기때문에 id의 입력받는 부분과 메세지가 출력될 부분 두 부분을 준비하였다.
ajax 코드
$('#memberId').on("input", function() {
var memberId = $('#memberId').val();
$.ajax({
url:"/member/check.kh",
data:{"memberId":memberId},
type:"get",
success:function(result){
if(result>0){
$('#msg').html("<b><font color='red'>이미 사용중인 아이디 입니다</b></font>");
}
if(result==0){
$('#msg').html("<b><font color='blue'>사용가능한 아이디입니다</b></font>")
}
},
error:function(){
alert("에러!")
}
})
})- 지난번 시험에서 무신사 회원가입 창은 실시간으로 id중복 체크를 하는걸 보고 꼭 해보고싶어서 어떤게 해당 함수에 잘 맞을지 찾아보았다
- 처음엔 onchange를 사용했는데 이건 해당값을 blur하지 않으면 실행이 안돼서 내가 원하는 실시간 체크가 되지 않았다
- 구글링해보니 oninput을 사용하면 실시간 체크가 가능했다! 하지만 이 경우 서버의 부담이 크지 않을까? 무신사는 좋은 서버를 쓰나보다…
- 이 코드는 memberId의 값을 컨트롤러로 보내고 컨트롤러는 해당값을 체크하여 result로 전달받으면 result가 0이 아닐때는 사용불가 메세지 0일때는 사용가능 메세지를 보내는 코드이다.
Controller
@ResponseBody
@RequestMapping(value = "/member/check.kh", method = RequestMethod.GET)
public String checkOneId(@RequestParam("memberId") String memberId) {
int result = mService.checkOneId(memberId);
return result+"";
}- 또 responsBody를 빼먹었다.. 잊지 말자…
- 이 코드 자체는 특별할것은 없다 requestParam으로 ajax가 전송한 meberId값을 받아오고 서비스 클래스로 그 값을 보냈다.
- 전송값을 보낼때 Json이 아니면 오류가 나지 않을까 했지만 간단한 문자는 오류없이 전송하는것 같다.
- 서비스나 스토어 부분은 전달하는것 외에는 특별할 것이 없기에 생략한다.
Mapper
<select id="selectOneById" resultType="_int">
select count(MEMBER_ID) from member_tbl where member_id = #{memberId}
</select>- 이 매퍼를 사용하는것은 너무 오랜만이어서 같은 id가 있는줄 모르고 작성했다가 서버가 다운되는 오류가 있었다.
- 다행이 오류에 익숙해져서 원인을 금방찾았다.
- 혹시 쿼리문이 잘못됐을지 확인을 위해 데이터베이스에서도 체크하였다.
- 서버의 부담을 덜기위해 Mmember_id칼럼 하나만 확인했다.
- resultType=”_int”로 해당 count의 숫자만을 반환받았다.
결과
gif로 하고 싶은데 학원은 gif 캡쳐 프로그램이 없어서…
어쨋든 한글자 한글자를 칠때마다 바로 유효성체크를 하는 코드가 완성되었다!!
오류
- ncaught RangeError: Maximum call stack size exceeded
- 함수에 오류가 있어 부를수있는 satck의 용량이 초과했다는 오류
- 내 문제는 ajax로 서버에 넘길 값을 선언을 하지 않아 생긴 오류였다.
요즘 너무 jquery를 쓰는것 같다 편하고 빠르니까 수업 수강중에는 안쓸수는 없는데 자바스크립트로 해당 코드를 쓸줄알아야 하는데 그것이 잘 안되는거 같다
둘중에 하나만쓰면 나머지 하나는 금방 까먹게 된다,
hello world