js formdata

// 创建一个新的 FormData 对象
let formData = new FormData();

// 添加键值对到 FormData 对象中
formData.append('username', 'exampleUser');
formData.append('password', 'examplePassword');

// 如果你想从一个表单元素创建 FormData 对象，你可以这样做：
// 假设你有一个 <form id="myForm">...</form> 的 HTML 表单
let formElement = document.getElementById('myForm');
let formDataFromElement = new FormData(formElement);

// 发送 FormData 对象使用 XMLHttpRequest
let xhr = new XMLHttpRequest();
xhr.open('POST', '/submit-form', true);

xhr.onload = function () {
  if (xhr.status === 200) {
    console.log('Form submitted successfully');
  } else {
    console.error('Form submission failed');
  }
};

xhr.send(formData);

// 使用 Fetch API 发送 FormData 对象
fetch('/submit-form', {
  method: 'POST',
  body: formData
})
.then(response => response.json())
.then(data => {
  console.log('Success:', data);
})
.catch((error) => {
  console.error('Error:', error);
});

解释说明

1. 创建 FormData 对象：new FormData() 用于创建一个新的 FormData 对象。它可以用来自动生成与 <form> 元素关联的键值对。

2. 添加数据：formData.append(key, value) 方法用于向 FormData 对象中添加键值对。

3. 从表单元素创建 FormData 对象：如果你有一个 HTML 表单元素，可以直接通过 new FormData(formElement) 来创建 FormData 对象，这会自动包含表单中的所有数据。

4. 发送 FormData：

   • 使用 XMLHttpRequest 可以通过 xhr.send(formData) 发送 FormData 对象。
   • 使用 Fetch API 可以通过 fetch(url, { method: 'POST', body: formData }) 发送 FormData 对象。

5. 处理响应：无论是使用 XMLHttpRequest 还是 Fetch API，都可以处理服务器返回的响应并根据需要进行操作。