如何使用 FormData 附加动态数据并提交表单-php教程-PHP中文网

如何使用 FormData 附加动态数据并提交表单

本文详解如何在原生表单提交基础上，将独立存储的用户答题数据（如性别、生日、过敏史等）通过 formdata.append() 动态追加至表单数据中，确保前后端完整接收所有字段。

本文详解如何在原生表单提交基础上，将独立存储的用户答题数据（如性别、生日、过敏史等）通过 formdata.append() 动态追加至表单数据中，确保前后端完整接收所有字段。

在实际业务场景中（例如完成问卷后跳转至订单表单），用户填写的「静态表单字段」（如姓名、电话）与「动态采集数据」（如 quiz 中记录的 gender、date、allergy 等）往往分属不同逻辑模块，分别存储在 DOM 表单和 JavaScript 对象中。若仅用 new FormData(form)，则无法自动包含 userData 中的数据——必须手动将其逐项追加。

✅ 正确做法：在提交前调用 `formData.append()`

修改你的 formSend 函数，在创建 FormData 实例后、发起 fetch 请求前，遍历 userData 并追加字段：

const form = document.getElementById("order_form");
form.addEventListener("submit", formSend);

const userData = {
  gender: "female",
  date: "15",
  month: "03",
  year: "1992",
  allergy: "nuts"
};

async function formSend(e) {
  e.preventDefault();

  let error = formValidate(form);
  let formData = new FormData(form);

  // ✅ 关键步骤：将 userData 中的字段逐一 append 到 FormData
  Object.entries(userData).forEach(([key, value]) => {
    if (value !== undefined && value !== null && value !== "") {
      formData.append(key, value);
    }
  });

  if (error === 0) {
    try {
      const response = await fetch("sendmail.php", {
        method: "POST",
        body: formData,
        // ⚠️ 注意：不要设置 Content-Type！浏览器会自动设置 multipart/form-data 及正确 boundary
      });
      if (response.ok) {
        const result = await response.json();
        console.log("提交成功:", result);
        form.reset();
      } else {
        console.error("服务器响应异常:", response.status);
      }
    } catch (err) {
      console.error("网络请求失败:", err);
    }
  }
}

? 后端接收说明（PHP）

在 sendmail.php 中，你已正确使用 $_POST 处理表单字段。由于 FormData.append() 添加的字段同样以 name=value 形式提交（属于 multipart/form-data 的文本字段），因此可直接通过 $_POST['gender']、$_POST['allergy'] 等方式获取：

// sendmail.php（片段）
$body = '';

if (!empty($_POST['name'])) {
    $body .= '<p><strong>Имя:</strong> ' . htmlspecialchars($_POST['name']) . '</p>';
}
if (!empty($_POST['phone'])) {
    $body .= '<p><strong>Телефон:</strong> ' . htmlspecialchars($_POST['phone']) . '</p>';
}
// ✅ 新增：安全获取 userData 字段
if (!empty($_POST['gender'])) {
    $body .= '<p><strong>Пол:</strong> ' . htmlspecialchars($_POST['gender']) . '</p>';
}
if (!empty($_POST['allergy'])) {
    $body .= '<p><strong>Аллергия:</strong> ' . htmlspecialchars($_POST['allergy']) . '</p>';
}
// 可依此类推处理 date/month/year

? 重要提醒：

不要手动设置 headers: { 'Content-Type': '...' }，否则会导致 FormData 的 boundary 丢失，PHP 无法解析；

建议对 $_POST 数据做 htmlspecialchars() 转义，防止 XSS；

若 userData 中存在文件类数据（如用户上传的头像），需先转为 Blob 或 File 对象再 append，但本例中均为字符串，可直接追加。