[JS] FormData 설명 정리

FormData 

FormData는 웹 브라우저에서 제공하는 JavaScript API로,
HTML form을 통해 사용자로부터 입력받은 데이터를 쉽게 처리하고 전송할 수 있도록 도와줍니다.
이 API를 사용하면, JavaScript를 사용하여 새로운 form 데이터를 생성하거나,
이미 존재하는 form 데이터를 가져와서 수정할 수 있습니다.


이러한 form 데이터는 HTTP 요청을 통해 서버로 전송될 때 사용됩니다.
FormData 객체는 append() 메서드를 사용하여 form 데이터의 각 항목을 추가할 수 있습니다.
이 메서드를 사용하면, key-value 쌍으로 이루어진 데이터를 form 데이터에 추가할 수 있습니다.
이때 key는 form 요소의 name 속성 값이 되며, value는 해당 form 요소에 입력된 값이 됩니다.


FormData 객체는 XMLHttpRequest 객체와 함께 사용될 때 가장 유용합니다
. XMLHttpRequest 객체의 send() 메서드에 FormData 객체를 전달하면, form 데이터를 서버로 전송할 수 있습니다. 이를 통해, AJAX 기술을 사용하여 웹 페이지를 동적으로 업데이트하는 등 다양한 웹 애플리케이션을 개발할 수 있습니다.

 

 

FormData 객체 + XMLHttpRequest 객체 예제

XMLHttpRequest 객체와 함께 FormData 객체를 사용하여 AJAX 요청을 보내는 방법은 다음과 같습니다.

 

1.FormData 객체 생성

var formData = new FormData();

 

2.FormData 객체에 데이터 추가

formData.append("key1", value1);
formData.append("key2", value2);
// ...

 

3.XMLHttpRequest 객체 생성

var xhr = new XMLHttpRequest();

 

4.XMLHttpRequest 객체의 open() 메서드를 사용하여 요청 설정

xhr.open("POST", "url", true);

 

5.XMLHttpRequest 객체에 FormData 객체 추가

xhr.send(formData);

 

전체 예제 코드

var formData = new FormData();
formData.append("key1", value1);
formData.append("key2", value2);
// ...

var xhr = new XMLHttpRequest();
xhr.open("POST", "url", true);

xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText);
    }
};

xhr.send(formData);

FormData 객체는 HTTP 요청의 body 부분에 데이터를 담아서 서버로 보내는 방식으로 사용됩니다. 이때, Content-Type 헤더 값은 "multipart/form-data"로 설정됩니다. 이러한 방식으로 파일 업로드나 폼 데이터 전송 등에 많이 사용됩니다.

---

FormData 설명 추천 링크 : 

https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-FormData-%EC%A0%95%EB%A6%AC-fetch-api