AJAX를 통한 JavaScript POST 요청 전송

이제 서버로 POST 요청을 보내보겠습니다. 이를 위해 fetch 함수에는 설정을 위한 두 번째 매개변수가 있습니다. method 설정에는 HTTP 요청 메서드를 지정합니다. POST 메서드를 지정해 봅시다:

button.addEventListener('click', function() {
	let promise = fetch('/handler/', {
		method: 'post',
	});
});

서버로 보내고 싶은 데이터도 설정해 봅시다. POST 요청에서 데이터는 HTTP 요청 본문에 전송됩니다. 이를 위해 데이터를 body 설정에 지정해야 합니다. Query String 형태로 지정하고, 해당 MIME 타입을 설정하여 데이터 유형을 명시해 봅시다:

button.addEventListener('click', function() {
	let promise = fetch('/handler/', {
		method: 'post',
		body: 'num1=1&num2=2',
		headers: {
			'Content-Type': 'application/x-www-form-urlencoded',
		},
	});
});

이 데이터를 서버에서 받아, 무언가를 처리한 후 다시 클라이언트로 보내보겠습니다:

export default {
	'/handler/': function({ post }) {
		return Number(post.num1) + Number(post.num2);
	}
}

클라이언트에는 div와 버튼이 있습니다. 버튼을 클릭하면 세 개의 숫자를 POST 메서드로 서버에 전송하세요. 서버가 전달된 숫자들의 합을 계산하도록 합니다. 결과를 div에 기록하세요.