[TIL] 23/07/18 페이지 리로드 없이 HTML 폼 사용하여 서버로 데이터를 전송하고 응답 처리하기

카트에 아이템 저장하기

1. html form이 submit 되면 값을 가지고 컨트롤러로 간다.
2. 사용자의 장바구니에 아이템을 넣은 후에 response entity를 리턴한다. message와 httpStatus는 결과에 따라 다르다. 성공하면 message: "item added" status: ok 실패하면 internal server error.
3. 리턴 받은 값을 가지고 다시 프론트에서 처리해준다. 만약에 받은 메세지가 item added라면, 아이템이 잘 담겼다는 팝업을 띄운 후에 현재 페이지에 머무르게 하고 만약 메시지가 item added와 같지 않다면, 팝업으로 에러메시지를 띄워준다.

<form th:action="@{/carts}"  method="post" onsubmit="return process(event)">

<script>
    async function process(e) {
        e.preventDefault();

        let formData = new FormData(e.target);
        let response = await fetch(e.target.action, {
            method: 'POST',
            body: formData
        });

        let data = await response.json();

        if (response.ok && data.message === "Item added") {
            alert('Item successfully added to the cart');
        } else {
            alert('Error occurred while adding item to the cart');
        }
        return false;
    }
</script>

1. 브라우저는 form의 submit 버튼이 클릭되면 페이지를 새로고침하거나 새 페이지를 열도록 기본 설정 되어 있다. 
2. 이 동작을 막기 위해서는 JS에서 이벤트의 기본 동작을 막아야 한다. 👉 event.preventDefault();
3. 그러나 onsubmit="process(event)"와 같은 inline 핸들러를 사용하면, 이벤트 핸들러가 이벤트 객체를 반환해야 한다. 이때 false를 반환하면 이벤트의 기본 동작이 막히고 true를 반환하면 기본 동작이 실행된다
4. 👉 process(event) 함수의 마지막에 return false를 추가하면 form 의 기본 submit 동작이 막히게 된다.