인천 일보 아카데미 50일차 -2- Email - 중복체크 (개인저장 내용X)

• Save.jsp

<script>
    const emailCheck = () => {
        let saveEmail = document.getElementById('email');
        let emailResult = document.getElementById('emailResult');
        $.ajax({
            type: "post",
            url: "/emailCheck",
            async: false,
            data: {
            "saveEmail":saveEmail.value
            },
            success: function (res) {
                emailResult.style.color = "green";
                emailResult.innerHTML = res;
                resResult = true;
            },
            error: function () {
                emailResult.style.color = "red";
                emailResult.innerHTML = "중복된 아이디입니다";
                resResult = false;
            }
        });
        return resResult;
    }
</script>

여기서 중요한부분은 async:false 인데

ajax는 비동기 처리방식이지만 async가 false라면 처리방식이 동기로 전환되며

true일 경우 비동기로 처리됩니다 default값은 true이기 때문에 굳이 적지 않아도 상관 없습니다

 

비동기 처리방식일 때에는 ajax의 success , error 부분에서는 값을 가져올 수 없지만

동기 처리방식으로 전환하였기 때문에 resResult에 담긴 값을 가져와 리턴할 수 있습니다

 

 

• Controller

    @PostMapping(value = "/emailCheck", produces = "application/text; charset=utf-8")
    public ResponseEntity emailCheck(@RequestParam("saveEmail") String saveEmail) {
        String dbEmail = memberService.emailCheck(saveEmail);
        if (dbEmail != null) {
            return new ResponseEntity(HttpStatus.CONFLICT);
        } else {
            return new ResponseEntity("사용 가능", HttpStatus.OK);
        }
    }

 

애초에 Mapper에서는 받아온 Email값을 비교해 정보를 가져오기 때문에

dbEmail에 null값이 리턴된다면 중복 Email이 없다는 말이고

null이 아닌 객체의 정보가 dbEmail에 담겨 있다면 중복된 Email이 있기에 찾아 담아오는것이기 때문에

null인 경우 OK를 null이 아닌경우 error로 넘어가며 다른 결과를 출력합니다

 

 

• Mapper

    <select id="saveEmail" parameterType="String" resultType="String">
        select memberEmail from member_table where memberEmail = #{saveEmail}
    </select>

대충 Mapper는 이렇게 썻습니다