简介
在 Web 开发中，我们经常需要向服务器发送数据。其中一种方式是使用 AJAX 技术（Asynchronous JavaScript and XML）从客户端异步地向服务器发送请求和接收响应。当我们需要发送复杂的数据时（例如表单数据、文件等），可以使用 FormData 对象来构建数据。
本文将介绍如何在前端中将数组添加到 FormData 并通过 AJAX 发送。我们将首先了解 FormData 对象及其用途。然后，我们将探讨如何将数组添加到 FormData 中并将其发送到服务器。最后，我们将提供一个示例代码，以便更好地理解这个过程。
FormData 对象简介
FormData 是 HTML5 新增的一种对象类型，它允许我们创建键值对，其中键是字符串类型，值可以是 blob、File 或字符串。FormData 通常用于将表单数据异步上传到服务器。
如果您不熟悉 FormData，请查看以下示例：
----- ------------ ------ ----------- ------------- ------------ ------ ----------- ------------- ------------ -------
----- ---- - ---------------------------------- ----- -------- - --- ---------------
在上面的示例中，我们已经创建了一个名为 formData 的 FormData 对象，并将表单数据添加到该对象中。现在，formData 对象包含两个键值对：field1=foo 和 field2=bar。
向 FormData 添加数组
现在，我们来看看如何向 FormData 对象添加数组。假设我们有一个名为 myArray 的数组，我们希望将其添加到 FormData 中。
----- ------- - ------- ------ -------
要将数组添加到 FormData 中，我们需要使用 append() 方法。该方法接受两个参数：键和值。对于数组，我们需要将键设置为数组的名称，并将值设置为数组本身。
----- -------- - --- ----------- -------------------------- ---------
然而，这样做并不会产生我们想要的结果。如果你尝试发送这个 formData 对象，你会发现服务器只会收到字符串 "[object Array]"。
这是因为 FormData 对象只能识别字符串、blob 和 File 类型的数据。它不能直接识别数组类型的数据。因此，我们需要将数组转换为字符串格式，然后将其添加到 FormData 对象中。
将数组转换为字符串格式
有多种方式可以将数组转换为字符串格式。最常见的方法是使用 JSON.stringify() 方法，该方法将 JavaScript 值转换为 JSON 字符串。
----- ------- - ------- ------ ------- ----- ---------- - ------------------------
在上面的示例中，我们使用 JSON.stringify() 方法将 myArray 转换为字符串格式，并将其存储在变量 myArrayStr 中。
现在，我们可以使用 append() 方法将 myArrayStr 添加到 FormData 中。
----- -------- - --- ----------- -------------------------- ------------
这样做就可以将数组添加到 FormData 中了。
发送 FormData 对象
现在，我们已经成功地将数组添加到 FormData 中。下一步是通过 AJAX 将 FormData 对象发送到服务器。
以下是一个示例代码，用于使用 XMLHttpRequest 对象将 FormData 对象发送到服务器：
----- --- - --- -----------------
---------------- -----------
---------- - -- -- -
-- ----------- --- ---- -
------------------- --------------
- ---- -
--------------------- ------- - - ----------------
-
--
-------------------在上面的示例中，我们创建了一个 XMLHttpRequest 对象，并将其配置为使用 POST 方法向 /upload 端点发送请求。然后，我们将 onload 回调函数设置为处理响应。最后，我们使用 send() 方法将 formData 对象发送到服务器。
总结
本文介
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/25766