[Spring] Ajax로 이메일 중복 확인하기

Ajax( Asynchronous JavaScript and XML )란?

• Javascript와 XML을 사용한 비동기적 정보 교환 방법입니다
• 브라우저의 XMLHttpRequest을 이용해 페이지를 갱신하지 않고 부분적으로 업데이트하는 방법을 말합니다
• Jquery, 브라우저의 fetch() 메소드 등 여러 방법으로 구현할 수 있습니다

 

fetch()를 사용해 Ajax 요청하기

회원 가입 시 페이지를 갱신하지 않고 이메일 중복 확인을 하는 예제입니다

# 가독성을 위해 bootstrap은 일부 생략
<h3>회원가입</h3>
<form action="/member/signup" method="post">
    <div>
        <label>이메일</label>
        <div class="input-group">
            <input name="email" id="inputEmail" required type="email">
            <button onclick="emailCheck();" type="button" id="buttonEmailCheck">
            	중복 확인
            </button>
        </div>
    </div>
</form>

 

• 이메일 입력창과 중복 확인 버튼을 부트스트랩의 input-group 클래스를 사용해 두 개로 묶었습니다
• '중복 확인' 버튼을 클릭하면 <script> 태그의 emailCheck()가 실행됩니다
• form 안에서 버튼이 submit 기능을 하지 못하도록 type=button 을 지정합니다

<script>
    async function emailCheck() {
        const emailValue = document.querySelector("#inputEmail").value;
        const url = "/member/email?email=" + emailValue;

        // ajax 요청
        const response = await fetch(encodeURI(url));

        // 응답처리
         alert(await response.text());
    }
</script>

 

• querySelector().value()를 사용해 email의 인풋값을 받습니다
• 받아온 email을 url의 요청 경로에 대입합니다
• 브라우저의 fetch() 메소드를 사용해 ajax 요청을 합니다. 응답값으로 Promise객체를 반환합니다
• Promise에 포함된 응답 결과를 response.text()로 출력합니다
• 비동기적인 ajax 요청이 동기적 메소드와 함께 작동할 수 있게 메소드 앞에 async와 await를 붙여주어야 합니다

 

@Controller
@RequiredArgsConstructor
@RequestMapping("member")
public class MemberController {
    private final MemberService service;

    @GetMapping("email")
    // 응답한 데이터를 view로 해석하지 않음
    @ResponseBody
    public String emailCheck(String email) {
        String message = service.emailCheck(email);
        return message;
    }
}

 

fetch()가 요청한 uri 경로를 처리하는 컨트롤러입니다

메소드가 응답한 데이터를 view로 해석하지 않도록 @ResponseBody 어노테이션을 붙여줍니다

@Service
@Transactional(rollbackFor = Exception.class)
@RequiredArgsConstructor
public class MemberService {
    private final MemberMapper mapper;

    public String emailCheck(String email) {
        Member member = mapper.selectByEmail(email);
        if (member == null) {
            // 사용 가능한 이메일
            return "사용 가능한 이메일입니다";
        } else {
            // 이미 존재하는 이메일
            return "이미 존재하는 이메일입니다";
        }
    }
}

 

@Mapper
public interface MemberMapper {
    @Select("""
                SELECT *
                FROM member
                WHERE email = #{email}
            """)
    Member selectByEmail(String email);
}

 

Mapper에서 이메일 중복값을 조회해 반환된 Member 값이 없으면 '사용 가능한 이메일입니다', 반환된 Member값이 있으면 '이미 존재하는 이메일입니다'를 반환합니다

 

결과

 

 

동일한 이메일이 존재하는 경우

 

 

동일한 이메일이 존재하지 않는 경우