[Ajax]아이디 실시간 체크

전자정부프레임에서 Ajax로 아이디 실시간 체크를 해봤다.

인풋이 일어날때마다 서버에 데이터를 보내 중복을 체크하는 방식이다

 

-스크립트단

function checkId(){
    var id = $('#id').val)();
    $.ajax({
        url:'/idDuplChk.do',
        type:'post',
        data:{id:id},
        success:function(data){
            if($.trim(data)==0){
                $('#chkMsg').html("
사용가능
");                
            }else{
                $('#chkMsg').html("
사용불가
");
            }
        },
        error:function(){
                alert("에러입니다");
        }
    });
};

 

-HTML단

<input type="text" id = "id" oninput = "checkId()" />
<span id = "chkMsg"></span> 

 

-Controller단

@RequestMapping(value = "/idDuplChk.do" , method = RequestMethod.POST)
public @ResponseBody String idDuplChk(@ModelAttribute("vo") UserVO vo , Model model) throws Exception{
    int result = joinService.idDuplChk(vo.getId());
    return String.valueOf(result);
}

 

-MyBatis단

<select id = "joinDAO_idDuplChk" parameterType = "String" resultType = "int">
    SELECT COUNT(*) FROM USER WHERE ID = #{id}
</select>

 

요롷게 해주면 아이디를 입력할때마다 중복체크를 해서 사용가능한지 아닌지를 실시간으로 화면에 나타내주게 된다