在前端中将数组添加到 FormData 并通过 AJAX 发送-JavaScript中文网-JavaScript教程资源分享门户

简介

在 Web 开发中，我们经常需要向服务器发送数据。其中一种方式是使用 AJAX 技术（Asynchronous JavaScript and XML）从客户端异步地向服务器发送请求和接收响应。当我们需要发送复杂的数据时（例如表单数据、文件等），可以使用 FormData 对象来构建数据。

本文将介绍如何在前端中将数组添加到 FormData 并通过 AJAX 发送。我们将首先了解 FormData 对象及其用途。然后，我们将探讨如何将数组添加到 FormData 中并将其发送到服务器。最后，我们将提供一个示例代码，以便更好地理解这个过程。

FormData 对象简介

FormData 是 HTML5 新增的一种对象类型，它允许我们创建键值对，其中键是字符串类型，值可以是 blob、File 或字符串。FormData 通常用于将表单数据异步上传到服务器。

如果您不熟悉 FormData，请查看以下示例：

<form id="myForm">
  <input type="text" name="field1" value="foo">
  <input type="text" name="field2" value="bar">
</form>

const form = document.getElementById('myForm');
const formData = new FormData(form);

在上面的示例中，我们已经创建了一个名为 formData 的 FormData 对象，并将表单数据添加到该对象中。现在，formData 对象包含两个键值对：field1=foo 和 field2=bar。

向 FormData 添加数组

现在，我们来看看如何向 FormData 对象添加数组。假设我们有一个名为 myArray 的数组，我们希望将其添加到 FormData 中。

const myArray = ['foo', 'bar', 'baz'];

要将数组添加到 FormData 中，我们需要使用 append() 方法。该方法接受两个参数：键和值。对于数组，我们需要将键设置为数组的名称，并将值设置为数组本身。

const formData = new FormData();
formData.append('myArray', myArray);

然而，这样做并不会产生我们想要的结果。如果你尝试发送这个 formData 对象，你会发现服务器只会收到字符串 "[object Array]"。

这是因为 FormData 对象只能识别字符串、blob 和 File 类型的数据。它不能直接识别数组类型的数据。因此，我们需要将数组转换为字符串格式，然后将其添加到 FormData 对象中。

将数组转换为字符串格式

有多种方式可以将数组转换为字符串格式。最常见的方法是使用 JSON.stringify() 方法，该方法将 JavaScript 值转换为 JSON 字符串。

const myArray = ['foo', 'bar', 'baz'];
const myArrayStr = JSON.stringify(myArray);

在上面的示例中，我们使用 JSON.stringify() 方法将 myArray 转换为字符串格式，并将其存储在变量 myArrayStr 中。

现在，我们可以使用 append() 方法将 myArrayStr 添加到 FormData 中。

const formData = new FormData();
formData.append('myArray', myArrayStr);

这样做就可以将数组添加到 FormData 中了。

发送 FormData 对象

现在，我们已经成功地将数组添加到 FormData 中。下一步是通过 AJAX 将 FormData 对象发送到服务器。

以下是一个示例代码，用于使用 XMLHttpRequest 对象将 FormData 对象发送到服务器：

-- -------------------- ---- -------
----- --- - --- -----------------
---------------- -----------
---------- - -- -- -
  -- ----------- --- ---- -
    ------------------- --------------
  - ---- -
    --------------------- ------- - - ----------------
  -
--
-------------------

在上面的示例中，我们创建了一个 XMLHttpRequest 对象，并将其配置为使用 POST 方法向 /upload 端点发送请求。然后，我们将 onload 回调函数设置为处理响应。最后，我们使用 send() 方法将 formData 对象发送到服务器。

总结

本文介

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/25766