토게피
36
2021-12-17 16:19:03
4
248

ajax 아이디 중복 확인 문제


실시간으로 아이디 중복 확인이 되도록 만들려고 하는데 잘 안 되네요 

컨트롤러가 동작을 안 하는 것 같아요...

아이디를 뭘 입력하든 else문이 작동돼서 아래처럼 뭘 입력해도 동적으로 안 바껴요...


(아이디를 입력하기 전에는 이 문구는 안 떠요)



<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script type="text/javascript">
    function checkId(){
        var id = $('#user_id').val();

        $.ajax({
            url: "${pageContext.request.contextPath}/user/idCheck",
            type: "POST",
            data: {id:id},
            success:function(flag){
                if(flag){
                    $('.id_already').css("display","inline-block");
                    $('.id_ok').css("display", "none");
                }else{
                    $('.id_ok').css("display","inline-block");
                    $('.id_already').css("display", "none");
                }
            },
            error:function(){
                alert("에러입니다");
            }
        });
    };
    </script>

ajax를 이용해 서버로 id를 보내는 부분


<div class="label">
        <label for="user_id">Id</label>
        <input type="text" id="user_id" name="username" class="form-control" placeholder="아이디" required oninput="checkId()">
        <span class="id_ok">사용 가능한 아이디입니다.</span>
        <span class="id_already">누군가 이 아이디를 사용하고 있어요.</span>
    </div>

아이디를 입력하는 input 태그



@PostMapping("/user/idCheck")
    @ResponseBody
    public boolean idCheck(@RequestParam("id") String id){
        LOG.info("userIdCheck 진입");
        LOG.info("전달받은 id:"+id);
        boolean flag=userService.userIdCheck(id);
        LOG.info("확인 결과:" + flag);
        System.out.println(flag);

        return flag;
    }

컨트롤러

디버그해도 이 곳으로 안 오고, 저 출력도 안 돼요

userSerivce의 userIdcheck는 existsByUsername을 사용했어요.(JPA)




0
  • 답변 4

  • ukyo
    134
    2021-12-17 16:26:53
    data: {'id':id},  이렇게 해보세요
  • 미노잉
    46
    2021-12-17 16:27:47

    일단 어디부터 문제인지 정확한 파악이 필요해 보입니다.

    컨트롤러를 안탄다고 하셨는데 ajax success의 else문이 작동됐다는 것은 컨트롤러에서 응답을 보냈다는 뜻입니다.


    그리고 실시간으로 확인이면 input에 문자 입력할 때마다 체크하고 싶으신 건가요?

    그럼 input에 keyup 이나 keydown 이벤트 주시고 콜백함수에서 checkId() 실행해보세요


    예를 들면

    $('input#user_id').on('keyup', function(evt) {
        // 여기서 체크 함수 실행
    });


  • 연습용더미1
    937
    2021-12-17 16:33:44
    /${pageContext.request.contextPath}/user/idCheck
    주소 맨 앞에 / 붙이셔야 절대주소로 갑니다. 현재는 /user/${pageContext.request.contextPath}/user/idCheck 이런식으로 갈겁니다.
  • 토게피
    36
    2021-12-17 22:45:38

    다들 답변 감사합니다.

    Spring Security 때문에 생긴 문제였어요

    /user/idCheck 무조건 접근하도록 허용하니까 해결됐어요 :)

  • 로그인을 하시면 답변을 등록할 수 있습니다.