[SpringBoot] Uncaught TypeError: Illegal invocation 서버에 전송할 데이터를 json타입으로 변경하기

안녕하세요.
https://blog.naver.com/sysysy0302 여니입니다 :)

yeonee 블로그 : 네이버 블로그

 

 

프로젝트 도중, 신고 게시글의 상세 조회를 할 때 새로운 페이지를 열지 않고 ajax를 이용하여 비동시 방식으로 구현하려는 도중 해당 오류를 겪게 되었습니다.

 

[ 수정 전 ]

function detailReport(e,no){
    console.log(no);

    var params = {
            reportNo : $("#no").val()
            ,reportWriter : $("#writer")
            ,reportTitle : $("#title")
            ,reportContent : $("#content")
            ,enrollDate : $("#date")
    }

    $.ajax({
        url:"${contextPath}/detailReport",
        method: "POST",
        data: params,
        success: function(data){
            $("#writer").text(data.reportWriter);
            $("#title").text(data.reportTitle);
            $("#content").text(data.reportContent);
            $("#date").text(data.enrollDate);
        },
        error: function () {
            alert("상세 정보를 불러오는데 실패했습니다.");
        }
    });
}

[ 오류 내용 ]

jquery.min.js:2 Uncaught TypeError: Illegal invocation

 

[ 구글 번역 ]

잡히지 않은 TypeError: 잘못된 호출

 

 

구글링을 통해 해당 오류 사례를 찾아보니, 자바스크립트의 Ajax를 통하여 데이터를 넘겨줄 때 발생하는 Error입니다.
이는 datatype을 'json' 으로 선언해주고 넘겨줄 data를 'JSON.stringify()' 함수를 이용하여 데이터를 넘겨줍니다.
그리고 contentType에는 'application/json; charset=utf-8'을 추가해줍니다.

 

[ 수정 후 ]

function detailReport(e,no){
    console.log(no);

    var params = {
            reportNo : $("#no").val()
            ,reportWriter : $("#writer")
            ,reportTitle : $("#title")
            ,reportContent : $("#content")
            ,enrollDate : $("#date")
    }

    $.ajax({
        url:"${contextPath}/detailReport",
        method: "POST",
        data: JSON.stringify(params),
        dataType: 'json',
        contentType:'application/json; charset=utf-8',
        success: function(data){
            //console.log(data);
            $("#writer").text(data.reportWriter);
            $("#title").text(data.reportTitle);
            $("#content").text(data.reportContent);
            $("#date").text(data.enrollDate);
        },
        error: function () {
            alert("상세 정보를 불러오는데 실패했습니다.");
        }
    });
}

서버측의 콘솔창 에러가 사라진 것을 볼 수 있습니다.

 

+ 오류는 사라졌지만 내가 넘겨받고자 하는 data값이 원하는대로 출력되지 않아 더 고민해보며 코드를 수정해보고 있습니다.