在前端开发中，表单是非常重要的组件之一。表单可以用来收集用户输入的数据，并将其提交到后台进行处理。在表单提交时，有两种常见的编码方式：x-www-form-urlencoded和multipart/form-data。本文将详细介绍这两种编码方式的区别、使用场景以及如何在前端代码中实现。
x-www-form-urlencoded
x-www-form-urlencoded是默认的表单提交编码方式。在该编码方式下，表单数据被编码为键值对，每个键值对之间用"&"符号分隔，键与值之间用"="符号分隔。例如：
name=john&age=20&gender=male
当表单中包含的数据量较少时，使用x-www-form-urlencoded的编码方式足以胜任。但当表单中包含上传文件等大量数据时，使用该编码方式会导致数据传输效率低下，因此需要使用multipart/form-data编码方式。
multipart/form-data
multipart/form-data是一种适用于表单提交中包含二进制数据或文件的编码方式。它会将表单数据拆分成多个部分，每一部分包含一个键值对。其中，键值对的名称由表单元素的name属性指定，而值则是该表单元素的值。例如，一个包含文件上传的表单可能会被编码成如下形式：
-- -------------------- ---- ------- ---------------------------------------- -------------------- ---------- ------------ ---------------------- ------------- ---------- ---- -- -- ------- ----- ---------------------------------------- -------------------- ---------- ----------- ---- ---------------------------------------- -------------------- ---------- ---------- -- ------------------------------------------
该编码方式将表单数据拆分成了多个部分，每个部分都以"------WebKitFormBoundaryzjJ0W9V7vOSiIhK1"开头，并以"------WebKitFormBoundaryzjJ0W9V7vOSiIhK1--"结尾。每个部分包含一个Content-Disposition头部，用于指定该键值对的名称和类型，以及一个Content-Type头部，用于指定数据类型。
实现示例
在前端代码中，可以使用XMLHttpRequest对象来实现表单提交。以下是使用x-www-form-urlencoded和multipart/form-data两种编码方式实现表单提交的示例代码：
x-www-form-urlencoded
-- -------------------- ---- -------
----- --- - --- -----------------
---------------- -----------------------------
------------------------------------ -------------------------------------
---------------------- - ---------- -
-- --------------- --- - -- ---------- --- ---- -
------------------------------
-
--
----- -------- - --- -----------
----------------------- --------
---------------------- ----
------------ --------------------------------------multipart/form-data
-- -------------------- ---- -------
----- --- - --- -----------------
---------------- -----------------------------
------------------------------------ --------------------- --------------------------------------------------
---------------------- - ---------- -
-- --------------- --- - -- ---------- --- ---- -
------------------------------
-
--
----- -------- - --- -----------
----------------------- --------
---------------------- ----
----------------------- ------------------- ---------------
-------------------在以上示例代码中，我们使用了XMLHttpRequest对象来发送POST请求，并设置了Content-Type头部。对于x-www-form-urlencoded编码方式，我们需要将表单数据转换成URLSearchParams对象，并调用toString()方法将其转换为字符串；对于multipart/form-data编码方式，我们
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/34487