JavaScript에서 FormData 작업하기

다음과 같은 폼이 있다고 가정해 봅시다:

<form action="/target/" method="POST">
	<input name="test1" value="123">
	<input name="test2" value="456">
	<input type="submit">
</form>

이 폼의 데이터를 키-값 쌍으로 얻고 싶다고 합시다. 이를 위해서는 루프를 실행하여 원하는 데이터를 구성해야 합니다. 그러나 JavaScript에는 더 쉬운 방법이 있습니다. 폼 데이터를 정렬된 방식으로 가져올 수 있는 특별한 객체 FormData를 사용할 수 있습니다.

이 객체 작업을 자세히 살펴보겠습니다. 먼저 폼에 대한 참조를 얻어봅시다:

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

이제 폼을 사용하여 객체를 생성해 봅시다:

let formData = new FormData(form);

객체를 콘솔에 출력할 수 있지만, 이렇게 출력하면 폼 데이터를 볼 수 없습니다:

console.log(formData);

폼 데이터를 보기 위해 객체를 배열로 변환해 봅시다:

console.log(Array.from(formData));

세 개의 입력 필드가 있는 폼이 주어집니다. 버튼도 있습니다. 버튼을 클릭하면 FormData 객체 형태로 폼 데이터를 가져옵니다.