본문 바로가기
웹개발/SpringBoot

자바스크립트 fetch로 REST API 호출하기 (댓글등록)

by 철없는민물장어 2023. 3. 13.
728x90
반응형

댓글 폼에 댓글내용을 작성하고 전송버튼을 클릭.

 

해당 버튼의 이벤트리스너를 추가해 클릭을 감지하고

클릭시에 fetch를 통해 RestAPI를 호출해보자..

 

<div class="card m-2" id="comments-new">
    <div class="card-body">
<!--        댓글 작성 폼-->
        <form>
            <div class="mb-3">
                <label class="form-label">nickname</label>
                <input type="text" class="form-control form-control-sm" id="new-comment-nickname">
            </div>
            <div class="mb-3">
                <label class="form-label">comment</label>
                <textarea type="text" class="form-control form-control-sm" rows="3" id="new-comment-body"></textarea>
            </div>
            <!--히든 인풋-->
            {{#article}}
                <input type="hidden" id="new-comment-article-id" value="{{id}}">
                {{/article}}
            <button type="button" class="btn btn-outline-primary btn-sm" id="comment-create-btn">save</button>
        </form>
    </div>

</div>

 뷰페이지에는

새 댓글의 정보를 입력할 폼이 있다.

nickname, body를 입력할 란이 있고, 각 란은 id값을 지정해놓았다.

또한, 현재 글의 article_id 정보를 함께 전달하기 위해 hidden타입의 input에 article_id값을 넣어두었다.

 

<script>
{
    //댓글 생성 버튼 변수에 저장
    const commentCreateBtn = document.querySelector("#comment-create-btn");

    //버튼클릭 이벤트 감지
    commentCreateBtn.addEventListener("click",function(){
        //새 댓글 객체 생성
        const comment = {
            nickname : document.querySelector("#new-comment-nickname").value,
            body : document.querySelector("#new-comment-body").value,
            article_id: document.querySelector("#new-comment-article-id").value
        }

        //fetch() - API요청을 JavaScript로 보냄
        const url = "/api/articles/"+comment.article_id +"/comments";
        fetch(url,{
            method: "post", //post요청을 보냄
            body: JSON.stringify(comment), //comment JS객체를 JSON으로 변경하여 보냄
            headers:{
                "Content-Type" : "application/json"
            }
        }).then(response => {
            //http 응답 코드에 따른 메세지 출력
            const msg = (response.ok) ? "saved" : "Error" ;
            alert(msg);

            //페이지 새로고침
            window.location.reload();
        });
    });
}
</script>

addEventListner를 이용해 전송버튼의 클릭을 감지하고,

폼에 입력된 정보를 이용해 JS 객체 comment를 생성한다.

 

그리고 fetch메소드를 이용하여 RestAPI를 호출하는데,

fetch() 메소드는 첫번째 인자로는 url을, 두번째 인자로는 옵션 객체를 전달해야한다.

두번째 인자인 옵션객체는

요청방법(method), 헤더(headers), 바디(body) 등의 정보를 포함해야하는데,

헤더에는 body에 넣을 데이터의 타입을 지정하는데, 여기서는 

"Content-Type" : "application/json"로 설정하여, 바디에서 JSON데이터를 다루도록 하였다.

body에는 JSON객체를 넣어주기 위해 JSON.stringify 메소드를 사용하여 JS객체를 JSON으로 변환하여 넣었다.

 

fetch가 완료되고 나면, 응답에 따른 동작을 하도록 .then()코드를 작성했다.

응답에 따라 메세지를 출력하고, 

페이지를 새로고침한다.

새로고침은 window.location.reload() 메소드를 이용하면 된다.

728x90
반응형

댓글