이메일 중복체크

ajax를 이용해서 이메일 중복체크를 해보려고 합니다!

JSP

<input type="button" value="중복확인"onclick="checkEmail()"></label>

버튼을 클릭했을 때 checkEamil()함수를 호출합니다.

ajax

function checkEmail() {
    var emailToCheck = $("#email").val();

    $.ajax({
        type: "GET",
        url: "/members/checkEmail/" + emailToCheck,
        success: function(response) {
            if (response === true) {
                // 이미 존재하는 이메일인 경우
                alert("이미 사용 중인 이메일입니다. 다른 이메일을 입력해주세요.");
            } else {
                // 존재하지 않는 이메일인 경우, 회원가입 진행
                alert("사용 가능한 이메일입니다.");
            }
        },
        error: function(error) {
            alert("이메일 중복 확인 중 오류가 발생했습니다.");
        }
    });
}

입력한 email을 가져와서

members/checkEmail + {email} 엔드포인트로 Get 요청을 보냅니다.

컨트롤러

  //이메일 중복체크
    @GetMapping("/checkEmail/{email}")
    public ResponseEntity<Boolean> checkEmail(@PathVariable String email) {
        return  ResponseEntity.ok(memberService. existsByEmail(email));

    }

클라이언트에거 응답메세지를 Boolean 값으로 설정했습니다.

Service

 public Boolean existsByEmail(String email) {
        return memberRepository.existsByEmail(email);
    }

MemberRepository를 통해 데이터베이스에서 이메일이 이미 존재하는지 확인합니다.

MemberRepository

  boolean existsByEmail(String email);

이메일이 데이터베이스에 있는지 확인합니다.