HTML 表单数据中正确发送 HTML 字符串内容的 Fetch 请求实践-php教程-PHP中文网

HTML 表单数据中正确发送 HTML 字符串内容的 Fetch 请求实践

使用 FormData 发送包含 HTML 字符串（如 Bold Text）的数据是完全可行的，关键在于避免错误地设置 Content-Type 或 processData 等 jQuery 风格选项——Fetch 原生 API 不支持这些字段，且 FormData 必须由浏览器自动设置 multipart/form-data 边界头。

使用 formdata 发送包含 html 字符串（如 `bold text`）的数据是完全可行的，关键在于避免错误地设置 `content-type` 或 `processdata` 等 jquery 风格选项——fetch 原生 api 不支持这些字段，且 formdata 必须由浏览器自动设置 `multipart/form-data` 边界头。

在你的代码中，问题并不出在 HTML 字符串本身（formData.append('delegation', "<b>Bold Text</b>") 完全合法），而在于以下两个常见误区：

误用 jQuery 风格配置项：processData: false 和 contentType: false 是 jQuery .ajax() 的选项，在原生 fetch() 中不存在且会被静默忽略，但可能误导开发者以为它们能控制请求头——实际上，它们不仅无效，还掩盖了真正的问题；
手动设置 Content-Type 头：当你显式设置 headers: { 'Content-Type': '...' } 时，若设为 application/json 或其他类型，会与 FormData 冲突；而若完全不设，浏览器会自动添加正确的 Content-Type: multipart/form-data; boundary=... ——这是 FormData 正常工作的前提。

✅ 正确做法如下：

const formData = new FormData();
formData.append('sponsor', 'My sponsor');
formData.append('rider', 'xRider');
formData.append('delegation', '<b>Bold Text</b>'); // ✅ 完全合法：HTML 字符串作为普通字段值

fetch(request_url, {
  method: 'POST',
  body: formData // ✅ 不要设置 headers、contentType 或 processData
})
.then(response => {
  if (!response.ok) throw new Error(`HTTP ${response.status}`);
  return response.json();
})
.then(data => {
  console.log('Working correctly:', data);
  // 处理成功响应
})
.catch(error => {
  console.error('%c Fetch Error:', 'color: #d32f2f', error);
  call_back_function({ status: 'failed', data: error });
});

⚠️ 注意事项：

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

FormData 对字段值类型无限制：字符串、Blob、File、甚至嵌套 HTML 字符串均可安全附加；
后端需正确解析 multipart/form-data（如 Express 中使用 multer，PHP 直接读 $_POST，Django 使用 request.POST）；
若后端仅接受 JSON，请改用 JSON.stringify() + application/json（此时 HTML 字符串需作为 JSON 字段值，而非 FormData）；
浏览器 DevTools 的 Network 面板中，可在 Headers → Request Headers 查看自动生成的 Content-Type，确认其含 boundary= 参数，即表示 FormData 已被正确识别。