JavaScript 中的 FormData：管理表單的權威指南

JavaScript 的 FormData 對象提供了一種便捷的方式來處理 HTML 表單數據，尤其是在使用 AJAX 或 fetch 發送數據到服務器時。 new FormData() 構造函數創建一個新的 FormData 實例。

你可以直接將 HTML 表單元素作為參數傳遞給 new FormData()。構造函數會自動收集表單中的所有輸入字段數據，包括文本框、複選框、單選按鈕以及文件上傳字段，並將它們添加到 FormData 對像中。

使用 FormData 的優勢

FormData 的主要優勢在於簡化了複雜數據的處理，特別是當表單包含多個字段或文件時。它會自動將數據格式化為合適的 HTTP 請求體，並設置必要的 multipart/form-data 頭部信息。 這使得 FormData 成為現代 Web 應用中動態發送表單數據而無需頁面刷新的理想選擇，提供了高效靈活的表單處理方案。

無需表單元素的示例

以下示例演示瞭如何在不依賴表單元素的情況下創建 FormData 對象：

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);
  });

說明:

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 對象：

// 获取表单元素
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);
  });

說明:

1. 一個包含各種輸入字段（文本、數字、文件）的 HTML 表單。每個字段的 name 屬性至關重要，因為它決定了 FormData 對像中的鍵名。
2. 將表單元素作為參數傳遞給 new FormData()，構造函數會自動收集表單數據。
3. 使用 fetch 發送數據到服務器。

處理和序列化表單數據

某些 API（例如 JSON Placeholder）不接受 FormData 對象，而是期望 JSON 對象。 要將 FormData 轉換為 JSON，你可以使用循環遍歷其鍵值對：

const obj = {};
const formData = new FormData(form);

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

或者更簡潔地使用 Object.fromEntries()：

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);
  });

React 範例

// 获取表单元素
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);
  });

總結

FormData 是 JavaScript 中處理表單資料的強大工具，它簡化了資料收集和傳送過程。雖然並非所有 API 都支援 FormData，但你可以輕鬆地將其轉換為 JSON 等其他格式。 使用 FormData 可以提高表單處理的靈活性和效率，尤其是在使用 AJAX 或 fetch 時。

以上是JavaScript 中的 FormData：管理表單的權威指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！