FormData 和 URLSearchParams 处理数据的异同详解

FormData:

1. 用途： 主要用于构建表单数据对象，以便通过 AJAX 请求将其发送到服务器。
2. 构造方法： 可以通过将一个表单元素或手动创建的 FormData 实例传递给构造函数来创建。
3. 数据格式： 可以包含键值对，每个键对应一个表单字段，值是用户输入的数据。
4. 文件上传： FormData 可以用于上传文件，通过 append 方法添加文件字段。
5. 例子：

   var formData = new FormData(document.getElementById('myForm'));
   formData.append('additionalKey', 'additionalValue');
   

URLSearchParams:

1. 用途： 主要用于构建 URL 查询字符串，方便将数据附加到 URL。
2. 构造方法： 直接通过传递一个查询字符串或一个包含查询参数的对象来创建。
3. 数据格式： 包含键值对，每个键值对对应一个查询参数。
4. 文件上传： 不适用于文件上传，主要用于处理文本数据。
5. 例子：

var searchData = {
    keyword: 'searchTerm',
    category: 'categoryValue'
};
var searchUrl = '/search?' + new URLSearchParams(searchData).toString();

进行数据请求时

     FormData：

• Content-Type: multipart/form-data; boundary=---------------------------[boundary]

  FormData 通常用于上传文件或包含二进制数据的请求，因此请求头中的 Content-Type 是 multipart/form-data。

  URLSearchParams：

• Content-Type: application/x-www-form-urlencoded;charset=UTF-8

  URLSearchParams 主要用于发送表单数据，因此请求头中的 Content-Type 是 application/x-www-form-urlencoded。这是常用于 HTML 表单提交的一种格式。

总结：

• FormData 主要用于处理表单数据，特别是包含文件上传的表单。
• URLSearchParams 主要用于构建 URL 查询字符串，方便将数据附加到 URL。

       在实际应用中，你可能会根据具体的需求选择使用其中的一个。如果你需要上传文件，或者通过 AJAX 请求发送表单数据，使用 FormData 更为合适。如果你只是需要构建查询字符串，方便将数据附加到 URL，那么使用 URLSearchParams 更为简单方便。