JavaScript의 FormData : 양식을 처리하기위한 결정적인 안내서

JavaScript의 FormData 개체는 특히 AJAX 또는 fetch을 사용하여 서버에 데이터를 보낼 때 HTML 양식 데이터를 처리하는 편리한 방법을 제공합니다. new FormData() 생성자는 새로운 FormData 인스턴스를 생성합니다.

HTML 양식 요소를 new FormData()에 매개변수로 직접 전달할 수 있습니다. 생성자는 텍스트 상자, 확인란, 라디오 버튼, 파일 업로드 필드를 포함하여 양식의 모든 입력 필드 데이터를 자동으로 수집하여 FormData 개체에 추가합니다.

FormData 사용의 장점

FormData의 주요 장점은 특히 양식에 여러 필드나 파일이 포함된 경우 복잡한 데이터 처리를 단순화한다는 것입니다. 데이터를 적절한 HTTP 요청 본문으로 자동 형식화하고 필요한 multipart/form-data 헤더 정보를 설정합니다. 따라서 FormData은 페이지 새로 고침 없이 최신 웹 애플리케이션에서 양식 데이터를 동적으로 전송하고 효율적이고 유연한 양식 처리 솔루션을 제공하는 이상적인 선택입니다.

양식 요소가 없는 예

다음 예에서는 양식 요소에 의존하지 않고 FormData 객체를 생성하는 방법을 보여줍니다.

<code class="language-javascript">const formData = new FormData();

// 手动添加数据
formData.append('nombre', 'John Serrano');
formData.append('edad', 30);
formData.append('archivo', fileInput.files[0]);

// 使用 fetch 发送数据到服务器
fetch('https://ejemplo.com/api', {
  method: 'POST',
  body: formData,
})
  .then((response) => response.json())
  .then((data) => {
    console.log('服务器响应:', data);
  })
  .catch((error) => {
    console.error('发送数据出错:', error);
  });</code>

설명:

1. 빈 FormData 개체를 만듭니다.
2. append() 메소드를 사용하여 수동으로 키-값 쌍을 추가하세요. 예를 들어 formData.append('nombre', 'John Serrano')은 nombre 값이 있는 John Serrano이라는 필드를 추가합니다. fileInput.files[0] 등 파일을 직접 추가할 수도 있습니다.
3. fetch을 사용하여 FormData 개체를 서버로 보냅니다. fetch은 자동으로 Content-Type 헤더를 multipart/form-data으로 설정합니다.

이 접근 방식은 HTML 양식에 의존하지 않고 동적으로 데이터를 구축해야 할 때 유용합니다.

양식 요소 사용 예

다음 예에서는 HTML 양식 요소를 사용하여 FormData 객체를 생성하는 방법을 보여줍니다.

<code class="language-javascript">// 获取表单元素
const formulario = document.getElementById('miFormulario');

// 使用表单元素创建 FormData 对象
const formData = new FormData(formulario);

// 使用 fetch 发送数据到服务器
fetch('https://ejemplo.com/api', {
  method: 'POST',
  body: formData,
})
  .then((response) => response.json())
  .then((data) => {
    console.log('服务器响应:', data);
  })
  .catch((error) => {
    console.error('发送数据出错:', error);
  });</code>

설명:

1. 다양한 입력 필드(텍스트, 숫자, 파일)가 포함된 HTML 양식입니다. 각 필드의 name 속성은 FormData 객체의 키 이름을 결정하므로 매우 중요합니다.
2. 양식 요소를 new FormData()에 매개변수로 전달하면 생성자가 자동으로 양식 데이터를 수집합니다.
3. fetch을 사용하여 서버에 데이터를 보냅니다.

양식 데이터 처리 및 직렬화

일부 API(예: JSON 자리 표시자)는 FormData 개체를 허용하지 않고 대신 JSON 개체를 기대합니다. FormData을 JSON으로 변환하려면 루프를 사용하여 키-값 쌍을 반복할 수 있습니다.

<code class="language-javascript">const obj = {};
const formData = new FormData(form);

for (const key of formData.keys()) {
  obj[key] = formData.get(key);
}</code>

더 간결하게 Object.fromEntries():

<code class="language-javascript">const formData = new FormData();

// 手动添加数据
formData.append('nombre', 'John Serrano');
formData.append('edad', 30);
formData.append('archivo', fileInput.files[0]);

// 使用 fetch 发送数据到服务器
fetch('https://ejemplo.com/api', {
  method: 'POST',
  body: formData,
})
  .then((response) => response.json())
  .then((data) => {
    console.log('服务器响应:', data);
  })
  .catch((error) => {
    console.error('发送数据出错:', error);
  });</code>

reft 예제

요약

<code class="language-javascript">// 获取表单元素
const formulario = document.getElementById('miFormulario');

// 使用表单元素创建 FormData 对象
const formData = new FormData(formulario);

// 使用 fetch 发送数据到服务器
fetch('https://ejemplo.com/api', {
  method: 'POST',
  body: formData,
})
  .then((response) => response.json())
  .then((data) => {
    console.log('服务器响应:', data);
  })
  .catch((error) => {
    console.error('发送数据出错:', error);
  });</code>

는 자바 스크립트에서 양식 데이터를 처리하기위한 강력한 도구로 데이터 수집 및 전송 프로세스를 단순화합니다. 모든 API가 지원하는 것은 아니지만

>는 JSON과 같은 다른 형식으로 쉽게 변환 할 수 있습니다. 특히 Ajax 또는 를 사용할 때 양식 처리의 유연성과 효율성을 향상시키기 위해 를 사용하십시오.

위 내용은 JavaScript의 FormData : 양식을 처리하기위한 결정적인 안내서의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!