POST请求：表单数据 vs 正常请求体及其他请求类型

在Web开发中，发送HTTP请求是前后端交互的核心。其中，POST请求是最常用的之一，用于向服务器提交数据进行处理。然而，对于POST请求来说，其参数可以以不同的形式传递，主要包括表单数据和JSON格式的请求体等。本文将深入探讨这些不同类型的请求及其应用场景，并提供实现方法。

表单数据与正常请求体的区别

表单数据

表单数据通常是通过HTML表单提交的数据，默认使用application/x-www-form-urlencoded MIME类型编码。这意味着键值对会被编码成URL查询字符串的形式，例如name=JohnDoe&age=30。如果需要上传文件，则会使用multipart/form-data编码方式。

正常请求体（如JSON）

另一种常见的POST请求是发送JSON格式的数据。这通常用于更复杂的数据结构，因为它允许嵌套对象和数组。这种请求的MIME类型为application/json。

具体使用：使用FormData和jsonToFormData

假设我们正在开发一个功能，允许用户编辑记录并可选地上传新文件。为了支持这种情况，我们需要能够将复杂的JSON对象转换为FormData对象，以便于同时上传文件和其他表单数据。

jsonToFormData 方法实现

首先，我们需要定义一个函数来递归地将JSON对象转换为FormData对象。考虑到JSON对象可能包含嵌套对象或数组，这个函数需要能够正确处理这些情况。

javascript 复制代码

function jsonToFormData(jsonData, form = new FormData(), namespace = '') {
  const formData = form || new FormData();

  for (const property in jsonData) {
    if (jsonData.hasOwnProperty(property)) {
      const formKey = namespace ? `${namespace}[${property}]` : property;
      const value = jsonData[property];

      // 如果值是对象或者数组，递归调用此函数
      if (value && typeof value === 'object' && !(value instanceof File)) {
        jsonToFormData(value, formData, formKey);
      } else {
        // 对于File对象，直接添加到FormData
        formData.append(formKey, value instanceof File ? value : String(value));
      }
    }
  }

  return formData;
}

使用示例

接下来，让我们看看如何使用上述方法来准备我们的POST请求数据。

javascript 复制代码

// 假设values是从表单收集的数据，record是一个包含objectId的对象，modeFile是用户选择的文件
const params = {
  ...values,
  objectId: record?.objectId || '',
};

// 将JSON对象转换为FormData
const formData = jsonToFormData(params);

// 如果有文件上传，则附加到FormData
modeFile && formData.append('modeFile', modeFile);

// 发送请求
fetch('/api/updateRecord', {
  method: 'POST',
  body: formData
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

场景应用

文件上传 ：当您需要上传文件时，使用FormData对象是非常必要的，因为它支持多部分/表单数据编码。
动态表单数据 ：对于那些包含动态生成字段的表单，比如根据用户的选择加载不同的输入框，jsonToFormData方法可以轻松适应这种变化。
API兼容性：某些后端API可能只接受表单数据格式，这时即使前端主要使用JSON进行数据交换，也需要在特定情况下转为表单数据。