JavaScript의 `FormData` 개체에 대해 알아야 할 모든 것

JavaScript에서 HTML 양식의 데이터로 작업할 때 해당 데이터를 수집, 조작하고 서버로 보내야 하는 경우가 종종 있습니다. 이것이 바로 강력하고 유연한 양식 관리 API인 FormData가 등장하는 곳입니다. 이 게시물에서는 FormData의 작동 방식, 이점, 실제 시나리오에서 사용할 수 있는 방법에 대해 자세히 설명합니다.

---

FormData란 무엇입니까?

FormData는 다음을 가능하게 하는 내장된 JavaScript 개체입니다.

• HTML 양식에서 간단한 데이터 수집.

• Fetch API 또는 XMLHttpRequest를 사용하여 해당 데이터를 서버로 보냅니다.

• 파일과 같은 바이너리 데이터로 작업합니다.

이 개체는 multipart/form-data MIME 유형에 따라 데이터 형식을 자동으로 지정하므로 파일을 포함한 복잡한 데이터를 전송하는 데 이상적입니다.

---

FormData 개체를 만드는 방법은 무엇입니까?

빈 FormData 객체 생성

데이터를 수동으로 추가하려면 빈 FormData 생성자를 사용하세요.

const formData = new FormData();
formData.append('username', 'Jelena');
formData.append('email', 'jelena@example.com');

양식에서 FormData 개체 만들기

HTML 양식이 있는 경우 양식 참조를 FormData 생성자에 직접 전달할 수 있으며, 그러면 자동으로 모든 데이터가 수집됩니다.

const form = document.getElementById('registrationForm');
const formData = new FormData(form);

---

데이터 추가

.append(key, value) 메소드를 사용하여 데이터가 추가됩니다.

formData.append('firstName', 'Jelena');
formData.append('lastName', 'Petković');

에서 파일을 추가하는 경우 .files[0]을 사용하세요.

const fileInput = document.getElementById('profilePicture');
formData.append('profilePicture', fileInput.files[0]);

---

데이터 읽기

FormData 객체의 데이터를 반복하려면 .entries() 메서드와 함께 for...of 루프를 사용하세요.

for (let [key, value] of formData.entries()) {
  console.log(`${key}: ${value}`);
}

---

FormData 데이터를 서버로 보내기

FormData는 fetch API를 사용하여 서버로 데이터를 보내는 데 이상적입니다. 다음은 간단한 예입니다.

fetch('https://example.com/api/register', {
  method: 'POST',
  body: formData, // Automatski formatiran kao multipart/form-data
})
  .then(response => response.json())
  .then(data => console.log('Uspešno registrovano:', data))
  .catch(error => console.error('Greška:', error));

Content-Type 헤더를 수동으로 설정할 필요가 없습니다. FormData는 이 작업을 자동으로 수행합니다.

---

FormData의 장점

1. 파일 작업
   
   FormData를 사용하면 에서 직접 파일을 쉽게 추가하고 보낼 수 있습니다. 필드입니다.

2. 자동 직렬화
   
   데이터를 수동으로 포맷하는 대신 FormData는 자동으로 multipart/form-data로 포맷합니다.

3. 유연성
   
   데이터 반복 및 업데이트 기능을 포함하여 키-값 쌍을 쉽게 관리할 수 있습니다.

4. 바이너리 데이터 지원
   
   이미지, PDF 또는 기타 파일과 같은 바이너리 데이터를 전송하는 데 이상적입니다.

---

실습 예시: 등록 양식

다음은 양식에서 데이터를 수집하여 서버로 보내는 완전한 예입니다.

HTML 양식

const formData = new FormData();
formData.append('username', 'Jelena');
formData.append('email', 'jelena@example.com');

---

유용한 팁

• 데이터를 수동으로 수정하려면 .append() 대신 .set(key, value)를 사용하세요.

• .has(key) 메소드를 사용하면 특정 키가 존재하는지 확인할 수 있습니다.

• 데이터를 삭제하려면 .delete(키)를 사용하세요.

---

결론

FormData는 양식 데이터 작업을 위한 강력한 도구입니다. 파일 작업 시에도 데이터를 쉽게 수집, 조작 및 전송할 수 있습니다. 유연성이 뛰어나고 최신 JavaScript API와 쉽게 통합되므로 많은 웹 애플리케이션에 없어서는 안 될 요소입니다.

위 내용은 JavaScript의 `FormData` 개체에 대해 알아야 할 모든 것의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!