JavaScript 的 FormData 對象提供了一種便捷的方式來處理 HTML 表單數據，尤其是在使用 AJAX 或 fetch 發送數據到服務器時。 new FormData() 構造函數創建一個新的 FormData 實例。
你可以直接將 HTML 表單元素作為參數傳遞給 new FormData()。構造函數會自動收集表單中的所有輸入字段數據，包括文本框、複選框、單選按鈕以及文件上傳字段，並將它們添加到 FormData 對像中。
使用 FormData 的優勢
FormData 的主要優勢在於簡化了複雜數據的處理，特別是當表單包含多個字段或文件時。它會自動將數據格式化為合適的 HTTP 請求體，並設置必要的 multipart/form-data 頭部信息。 這使得 FormData 成為現代 Web 應用中動態發送表單數據而無需頁面刷新的理想選擇，提供了高效靈活的表單處理方案。
無需表單元素的示例
以下示例演示瞭如何在不依賴表單元素的情況下創建 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>說明:
FormData 對象。 append() 方法手動添加鍵值對。例如，formData.append('nombre', 'John Serrano') 添加一個名為 nombre 值為 John Serrano 的字段。 你也可以直接添加文件，例如 fileInput.files[0]。 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>說明:
name 屬性至關重要，因為它決定了 FormData 對像中的鍵名。 new FormData()，構造函數會自動收集表單數據。 fetch 發送數據到服務器。 處理和序列化表單數據
某些 API（例如 JSON Placeholder）不接受 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>React 範例
<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>總結
FormData 是 JavaScript 中處理表單資料的強大工具，它簡化了資料收集和傳送過程。雖然並非所有 API 都支援 FormData，但你可以輕鬆地將其轉換為 JSON 等其他格式。 使用 FormData 可以提高表單處理的靈活性和效率，尤其是在使用 AJAX 或 fetch 時。
以上是JavaScript 中的 FormData：管理表單的權威指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！
