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

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

使用 FormData 的優(yōu)勢

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

無需表單元素的示例

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

const formData = new FormData();

// 手動添加數(shù)據(jù)
formData.append('nombre', 'John Serrano');
formData.append('edad', 30);
formData.append('archivo', fileInput.files[0]);

// 使用 fetch 發(fā)送數(shù)據(jù)到服務(wù)器
fetch('https://ejemplo.com/api', {
  method: 'POST',
  body: formData,
})
  .then((response) => response.json())
  .then((data) => {
    console.log('服務(wù)器響應(yīng):', data);
  })
  .catch((error) => {
    console.error('發(fā)送數(shù)據(jù)出錯:', error);
  });

說明:

1. 創(chuàng)建一個空的 FormData 對象。
2. 使用 append() 方法手動添加鍵值對。例如，formData.append('nombre', 'John Serrano') 添加一個名為 nombre 值為 John Serrano 的字段。 你也可以直接添加文件，例如 fileInput.files[0]。
3. 使用 fetch 發(fā)送 FormData 對像到服務(wù)器。 fetch 會自動設(shè)置 Content-Type 頭部為 multipart/form-data。

這種方法在需要動態(tài)構(gòu)建數(shù)據(jù)且不依賴 HTML 表單時非常有用。

使用表單元素的示例

以下示例演示瞭如何使用 HTML 表單元素創(chuàng)建 FormData 對象：

// 獲取表單元素
const formulario = document.getElementById('miFormulario');

// 使用表單元素創(chuàng)建 FormData 對象
const formData = new FormData(formulario);

// 使用 fetch 發(fā)送數(shù)據(jù)到服務(wù)器
fetch('https://ejemplo.com/api', {
  method: 'POST',
  body: formData,
})
  .then((response) => response.json())
  .then((data) => {
    console.log('服務(wù)器響應(yīng):', data);
  })
  .catch((error) => {
    console.error('發(fā)送數(shù)據(jù)出錯:', error);
  });

說明:

1. 一個包含各種輸入字段（文本、數(shù)字、文件）的 HTML 表單。每個字段的 name 屬性至關(guān)重要，因?yàn)樗鼪Q定了 FormData 對像中的鍵名。
2. 將表單元素作為參數(shù)傳遞給 new FormData()，構(gòu)造函數(shù)會自動收集表單數(shù)據(jù)。
3. 使用 fetch 發(fā)送數(shù)據(jù)到服務(wù)器。

處理和序列化表單數(shù)據(jù)

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

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

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

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

const formData = new FormData();

// 手動添加數(shù)據(jù)
formData.append('nombre', 'John Serrano');
formData.append('edad', 30);
formData.append('archivo', fileInput.files[0]);

// 使用 fetch 發(fā)送數(shù)據(jù)到服務(wù)器
fetch('https://ejemplo.com/api', {
  method: 'POST',
  body: formData,
})
  .then((response) => response.json())
  .then((data) => {
    console.log('服務(wù)器響應(yīng):', data);
  })
  .catch((error) => {
    console.error('發(fā)送數(shù)據(jù)出錯:', error);
  });

React 範(fàn)例

// 獲取表單元素
const formulario = document.getElementById('miFormulario');

// 使用表單元素創(chuàng)建 FormData 對象
const formData = new FormData(formulario);

// 使用 fetch 發(fā)送數(shù)據(jù)到服務(wù)器
fetch('https://ejemplo.com/api', {
  method: 'POST',
  body: formData,
})
  .then((response) => response.json())
  .then((data) => {
    console.log('服務(wù)器響應(yīng):', data);
  })
  .catch((error) => {
    console.error('發(fā)送數(shù)據(jù)出錯:', error);
  });

總結(jié)

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

以上是JavaScript 中的 FormData：管理表單的權(quán)威指南的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！