Formdata in JavaScript: definitive guide to handle forms

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

The main advantage of

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:

<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>

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:

<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>

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:

<code class="language-javascript">const obj = {};
const formData = new FormData(form);

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

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

<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>

Summary

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

, you can easily convert it to other formats such as JSON. Use to improve the flexibility and efficiency of the form processing, especially when using AJAX or

. 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!