FormData JavaScript를 사용한 AJAX 폼 전송

FormData를 사용하면 폼의 모든 필드를 자동으로 서버로 전송할 수 있습니다. 어떻게 하는지 살펴보겠습니다.

다음과 같은 폼이 있고, 인풋에 name 속성이 부여되어 있다고 가정해 보겠습니다:

<form action="" method="GET">
	<input name="num1">
	<input name="num2">
	<input type="submit">
</form>

이 폼을 AJAX로 전송해 보겠습니다. 먼저 폼에 대한 참조를 변수에 가져옵니다:

let form = document.querySelector('form');

이제 요청 본문의 데이터로 FormData 객체를 지정합니다. 그리고 객체 자체에 매개변수로 폼에 대한 참조를 전달합니다:

form.addEventListener('submit', function(event) {
	let promise = fetch('/handler/', {
		method: 'POST',
		body: new FormData(this) // 폼에 대한 참조 전달
	});
	
	event.preventDefault();
});

결과적으로 서버에서는 name 속성의 이름으로 인풋 값을 얻을 수 있습니다:

export default {
	'/handler/': function({post}) {
		console.log(post.num1);
		console.log(post.num2);
		return 'form data received';
	}
}

숫자를 입력하는 다섯 개의 인풋이 있는 폼이 주어져 있습니다. 이 폼을 POST 메서드로 서버에 전송하세요. 서버가 입력된 숫자의 산술 평균을 찾아 결과를 브라우저로 다시 전송하도록 하세요.