JS FormData对象使用方法实例详解

什么是FormData对象

• FormData对象是JavaScript提供的一种数据处理对象，主要用来实现表单数据的序列化操作、数据的自动编码以及数据传输等功能。

FormData对象常用方法

• FormData对象常用的方法有以下几种:

• append(name, value[, filename]): 在一个form data中增加一个包含name/value键值对的数据。

• delete(name): 删掉一个键值对；如果有多个相同的name，全部删掉。

• get(name): 获取一个name所对应的一组键值对;如果没有这样的键值对则返回null。

• getAll(name): 获取一个name所对应的全部键值对。

• has(name): 如果有至少一个name所对应的键值对或者 filename 所对应的值存在则返回true, 否则返回false。

• set(name, value[, filename]): 设置一个某个name所对应的value值或者增加一个包含name/value的键值对的数据。

FormData对象简单示例

接下来通过两个示例来讲解FormData对象的使用方法。

1. 表单上传图片

<!--HTML结构-->
<form>
  <input type="file" id="file">
  <button onclick="submitForm()">提交表单</button>
</form>

//JS 代码
function submitForm() {
  let formData = new FormData();
  formData.append('file', document.querySelector('#file').files[0]);

  fetch('/upload', {
    method: 'POST',
    body: formData
  }).then(response => response.json())
   .then(result => {
     console.log(result);
   });
}

2. 添加表单数据与json对象数据

// JS代码
const form = new FormData();
form.append('name', 'yyang');
form.append('age', 20);

fetch('/submit', {
  method: 'POST',
  body: form,
}).then(response => response.json())
  .then(result => {
     console.log(result);
  });


const userData = {
  name: 'yyang',
  age: 20
};

fetch('/submit', {
  method: 'POST',
  body: JSON.stringify(userData),
  headers: {
    'Content-Type': 'application/json'
  }
}).then(response => response.json())
  .then(result => {
    console.log(result);
  });

上面这个例子展示了如何把表单数据和JSON数据都加入到FormData里面，实现了数据的同时传输。

总结

通过本文的讲解，我们可以了解到FormData对象是一种非常有用的JavaScript数据处理对象，可以方便地实现数据的序列化操作、数据的自动编码以及数据传输等功能。同时，通过上面的示例，我们也可以看到FormData对象在表单上传和同时传输表单数据和JSON对象数据方面的优秀表现。

大家在进行FormData对象的使用时，需要熟记相关的方法，并且注意数据格式的转换。