JavaScript's FormData object provides a convenient way to handle HTML form data, especially when using AJAX or fetch to send data to a server. The new FormData() constructor creates a new FormData instance.

You can pass HTML form elements directly as parameters to new FormData(). The constructor automatically collects all input field data in the form, including text boxes, check boxes, radio buttons, and file upload fields, and adds them to the FormData object.

Advantages of using FormData

FormData is that it simplifies processing of complex data, especially when the form contains multiple fields or files. It automatically formats the data into the appropriate HTTP request body and sets the necessary multipart/form-data header information. This makes FormData an ideal choice for dynamically sending form data in modern web applications without page refresh, providing an efficient and flexible form processing solution.

Example without form elements

The following example demonstrates how to create a FormData object without relying on a form element:

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

Description:

1. Creates an empty FormData object.
2. Add key-value pairs manually using the append() method. For example, formData.append('nombre', 'John Serrano') adds a field named nombre with a value of John Serrano. You can also add files directly, such as fileInput.files[0].
3. Use fetch to send the FormData object to the server. fetch will automatically set the Content-Type header to multipart/form-data.

This approach is useful when you need to dynamically build data without relying on HTML forms.

Examples of using form elements

The following example demonstrates how to create a FormData object using HTML form elements:

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

Description:

1. An HTML form containing various input fields (text, numbers, files). The name attribute of each field is crucial because it determines the key name in the FormData object.
2. Pass the form element as a parameter to new FormData() and the constructor will automatically collect the form data.
3. Use fetch to send data to the server.

Processing and serializing form data

Some APIs (such as JSON Placeholder) do not accept FormData objects and instead expect JSON objects. To convert FormData to JSON, you can use a loop to iterate over its key-value pairs:

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

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

or more concisely 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 example

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

is a powerful tool for processing form data in JavaScript, which simplifies the data collection and sending process. Although not all APIs support

. FormData

The above is the detailed content of Formdata in JavaScript: definitive guide to handle forms. For more information, please follow other related articles on the PHP Chinese website!