12_ajax 이메일 중복체크_중복체크 구현 완료

MemberController

Controller에 데이터가 넘어오는지까지만 확인만 했지만 DB에 실제로 체크를 해봐야한다. 

emailCheck()를 통해 DB에서 이미 받아온 memberEmail이 있는지 없는지 확인한다.

    @PostMapping("/member/email-check")
    public @ResponseBody String emailCheck(@RequestParam("memberEmail") String memberEmail) {
        System.out.println("memberEmail = " + memberEmail);
        String checkResult = memberService.emailCheck(memberEmail);
        return "체크완료";
    }

 

MemberService

• emailCheck하는 findByMemberEmail()을 만든적 있는데 이것을 다시 활용한다.
• if문으로 findByMemberEmail()을 사용하여email값이 있는지 없는지 확인 한다.
  (여기서 조심할 점은 조회결과가 없어야 사용할 수 있다.)

public String emailCheck(String memberEmail) {
    Optional<MemberEntity> byMemberEmail = memberRepository.findByMemberEmail(memberEmail);
    if (byMemberEmail.isPresent()) {
        // 조회결과가 있다 -> 사용할 수 없다.
        return null;
    } else {
        // 조회결과가 없다 -> 사용할 수 있다.
        return "ok";
    }
}

 

MemberController

if 문을 써서 넘겨도 되지만 그냥 return값을 넘겨도 된다.

    @PostMapping("/member/email-check")
    public @ResponseBody String emailCheck(@RequestParam("memberEmail") String memberEmail) {
        System.out.println("memberEmail = " + memberEmail);
        String checkResult = memberService.emailCheck(memberEmail);
        
//       if (checkResult != null) {
//            return "ok";
//        } else {
//            return "no";
//        }
        return checkResult;
    }

 

save.html - script 부분

• 스크립트 부분에 성공부분을 완성 시켜 준다. if (res == "ok") {}else{}
• 스크립트의 if부분에서 성공여부를 html에 사용자에게 전달해준다.

success: function(res) {
                console.log("요청성공", res);
                if (res == "ok") {
                    console.log("사용가능한 이메일");
                    checkResult.style.color = "green";
                    checkResult.innerHTML = "사용가능한 이메일";
                } else {
                    console.log("이미 사용중인 이메일");
                    checkResult.style.color = "red";
                    checkResult.innerHTML = "이미 사용중인 이메일";
                }
            },