[jQuery&JavaScript] keyup() 메서드를 통한 id중복 검사, 입력창 공백 에 따른 태그생성 비동기식 이벤트 처리구현

<select id="checkId" resultType="int">
    SELECT COUNT(*) FROM mvc_user 
    where account=#{account}
</select>

priamrykey인 아이디를 기준으로 조회했을대 count를세어서 1이나오면  DB에 저장되어 있으므로 이미 가입된 아이디 아이디고

만약 0이 라면(primarykey이기때문에 1이상이 나오지않음) DB에 저장이 안됬으므로 사용가능한 아이디라는 유효성 검증 기준을 내릴수 있습니다.

 

@RestController 
@RequestMapping("/user")
public class UserController {
    @PostMapping("/checkId")
    public String checkId(@RequestBody String account) {
        System.out.println("/user/checkId: POST요청 발생!");
        int checkNum = service.checkId(account);
        String result = null;
        if(checkNum == 1) {
            System.out.println("아이디가 중복됨!");
            result = "NO"; 
        }else {
            System.out.println("아이디 사용 가능!");
            result = "OK";
        }
        return result;
    }
}

Rest방식의 컨트롤러에서 메서드를 구축할 때에는 @RequestBody 어노테이션을 사용하게되는데

폼으로부터 전송되는 파라미터방식이 아니고, HTTP 요청바디 즉, RequestBody를 통해 보내기 때문에 컨트롤러에서 요청 바디에 있는 내용을 받을수 있는 어노테이션을 지정해야 합니다.

 

 

현재 DB에있는 abc1234를 전송해서 제대로 처리가 되는지 실행해보겠습니다.

 

 

 아이디가 중복됨! 이라는 로그 출력

DB에 들어있는 abc1234를 전송했을때 숫자1을 반환받아 아이디가 중복됨! 이라는 로그 출력

 

 아이디사용 가능! 이라는 로그 출력

DB에 들어있지 않은 abc12345를 전송했을때 숫자1을 반환받아 아이디 사용 가능! 이라는 로그 출력

 

 

jQuery와 자바스크립트의 keyup함수를 통한 비동기식 이벤트를 처리합니다.

$(function() {
    $('#user_id').keyup(function(){
        if($(this).val() === ""){
            $(this).css("background-color","pink");//css속성중 배경색을 pink색으로 바꾸겠다.
            $('#idChk').html("<b style='font-size:14px; color:red;'>[아이디는 필수 정보!]</b>");
        }else{
            const id = $(this).val();
            $.ajax({
                type: "POST"
                ,url: "/user/checkId"
                ,headers:{"Content-Type":"application/json"}
                ,dataType:"text"
                ,data: id
                ,success:function(result){
                    if(result === "OK"){
                        $(this).css("background-color","aqua");
                        $('#idChk').html("<b style='font-size:14px; color:green;'>[아이디는 사용 가능!]</b>");
                    }else{
                        $(this).css("background-color","pink");
                        $('#idChk').html("<b style='font-size:14px; color:red;'>[아이디가 중복됨!]</b>");
                    }
                }
                ,error:function(){
                    console.log("통신 실패!");
                }
            });			
        }
    });
});

keyup() 함수란 한글자를 입력할 때 마다 이벤트를 발생시킵니다.

 

입력박스를 클릭 후 입력 했다가 다시 지웠을때 아무것도 입력이 되어있지 않다면 공백임을 알리는 이벤트 로직과,

한글자를 입력할 때 마다 서버로 통신을 보낸후 다시 서버로부터 응답메시지를 받아 이벤트를 처리하는 로직입니다.

 

한글자 입력했을 때 마다 서버 컨트롤러단의 메서드를통해 DB까지찍어 데이터를 검사하고 결과값을 돌려받아 문자열을 반환하여 해당문자열을 통해 아이디가 중복인지 중복이아닌지 유효함을 처리해주는 비동기식 aJax() 로직입니다.