WindsomeProject - ajax success 함수 호출 안 되는 오류

개요

이 포스팅에서는 리뷰 등록 기능을 기존의 form 전송 방식에서 ajax를 이용한 비동기 방식으로 변경하는 과정에서 발생한 문제와 그 해결 방법에 대해 간략하게 정리해 보고자 한다.

오류

리뷰는 성공적으로 등록되지만, ajax의 success 함수가 호출되지 않았다.

원인 및 해결법

success 함수가 호출되지 않았던 이유는 ajax의 dataType 속성 값으로 json을 설정했지만, 서버에서는 단순 String 값을 반환했기 때문이다. 이를 해결하기 위해 dataType 속성 값을 json에서 text로 변경하면 문제가 해결되었다. 이후에는 success 함수가 정상적으로 동작했다.

/* ReviewController */

@PostMapping("/review/enroll")
public ResponseEntity<String> enrollReview(@RequestBody ReviewEnrollDto reviewEnrollDto, @CurrentAccount Account account) {
    try {
        reviewService.enrollReview(reviewEnrollDto, account);
    } catch (Exception e) {
        return ResponseEntity.badRequest().body("리뷰 등록 중 오류가 발생하였습니다.");
    }
    return ResponseEntity.ok().body("리뷰가 등록되었습니다."); // String 반환
}

/* review.html */

$(".enroll_btn").on("click", function () {
    let itemId = $(".hiddenItemId").val();

    let param = {
        itemId: itemId,
        title: $(".title_input").val(),
        rating: $(".rating_select").val(),
        content: $(".content_input").val(),
        password: $(".password_input").val()
    }
    let paramData = JSON.stringify(param);

    $.ajax({
        url: "/review/enroll",
        type: "POST",
        contentType: "application/json",
        dataType: "text", // json -> text로 변경
        cache: false,
        data: paramData,
        success: function (result, status) {
            alert(result);
            location.href = '/reviews';
        },
        error: function (request, status, error) {
            if (request.status === '401') {
                alert('로그인 후 이용해주세요.');
                location.href = '/login';
            } else {
                alert(request.responseText);
            }
        },
    });
});