[SpringBoot/Thymeleaf] ajax 회원가입 중복체크 (Spring Data JPA)

 

register.html

<input type="text" class="form-control" id="name" name="name" th:value="${wrote?.name}" placeholder="Username" oninput = "Check()">

 

oninput으로 script의 함수를 설정해서

입력을 받으면 즉시 DB에서 비교할 수 있다.

---

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
    function Check() {
        let name = $('#name').val(); // "name"인 입력란의 값을 저장

        $.ajax({
            type: 'GET',
            url: "/account/check", //Controller 주소
            data: {name:name},
            success: function (data) {
                console.log(data);
                if(data>0){
                    $("#checkId").text('이미 사용중인 이름입니다');
                    document.getElementById("checkId").style.color = '#ff0000';
                }else{
                    document.getElementById("checkId").style.color = '#00d0ff';
                    $("#checkId").text('사용 가능한 이름입니다');
                }

            },
            error: function () {
                alert("에러입니다");
            }
        });
    }
</script>

id값이 name인 input에 작성한 값을 ajax로

/account/check의 경로로 보낸다(Controller) 

그리고 그에 따라 적당한 css와 html을 설정해줬다

---

Controller

@ResponseBody
@GetMapping("/check")
public int idCheck(@RequestParam String name){
    int cnt = userService.idCheck(name);
    return cnt;
}

Controller로 요청이오면 파라미터로 넘어온 name을 idCheck함수에 넣고

cnt를 리턴한다

---

Service

public int idCheck(String name){
    int cnt = (int)userDJRepository.countByName(name);
    return cnt;
}

name을 함수에 넣고, cnt를 int타입으로 바꾸고 리턴한다 

---

Repository

public interface UserDJRepository extends JpaRepository<Member, Long> {
    boolean existsByName(String name);
    long countByName(String name);
}

가져온 name의 count를 가져오도록 countByName으로 설정한다

---