将 FormData 转换为 JSON - Javascript

简介

当我们在 JavaScript 中要发送 HTTP 请求时，通常情况下我们要使用 FormData 类型来收集表单数据。然而，在某些情况下我们可能需要将 FormData 转换为 JSON 格式，以便于与后端 API 进行通信。

在本文中，我们将介绍如何将 FormData 对象转换为 JSON 格式，并提供不同的实现方式及代码示例。

实现方式

方式一：手动遍历 FormData

我们可以手动遍历 FormData 中的每个键值对，然后将其转换为一个 JSON 对象。下面是一个示例代码：

function formDataToJson(formData) {
  const jsonObject = {};

  for (const [key, value] of formData) {
    jsonObject[key] = value;
  }

  return JSON.stringify(jsonObject);
}

以上代码的实现方式比较简单，我们先创建了一个空的 JSON 对象 jsonObject，然后遍历 FormData 中的键值对，将其添加到 jsonObject 中，并最终调用 JSON.stringify 方法将其转换为 JSON 格式。

方式二：使用第三方库

我们也可以使用第三方库来将 FormData 转换为 JSON。其中比较常用的是 form-serialize，它可以直接将 FormData 序列化为 JSON 格式。下面是 form-serialize 的使用示例：

import serialize from 'form-serialize';

const formData = new FormData();
formData.append('name', 'jack');
formData.append('age', 18);

const json = serialize(formData, { hash: true });
console.log(json); // {name: "jack", age: "18"}

我们先导入了 form-serialize 库并创建了一个 FormData 对象 formData，然后通过调用 serialize(formData, { hash: true }) 将其转换为 JSON 格式。

方式三：使用 ES6 扩展运算符

我们也可以使用 ES6 中的扩展运算符 ... 来将 FormData 对象转换为 JSON 对象。下面是一个示例代码：

const formData = new FormData();
formData.append('name', 'jack');
formData.append('age', 18);

const jsonObject = Object.fromEntries(formData.entries());
const jsonString = JSON.stringify(jsonObject);

console.log(jsonString); // {"name":"jack","age":18}

以上代码中，我们使用 ... 运算符将 FormData 的 entries() 转换为一个数组，并将其传递给 Object.fromEntries() 方法创建一个 JSON 对象。然后我们使用 JSON.stringify() 方法将 JSON 对象转换为字符串。

总结

以上就是本文介绍的三种方式将 FormData 转换为 JSON 格式的方法。根据实际场景选择不同的方式可以使代码更加简洁和清晰。