1. 问题剖析：为何参数为空？
在使用 javascript 的 fetch api 向 php 后端发送 post 请求时，开发者常遇到 php 的 $_post 变量为空或接收到空数组的问题。这通常源于 fetch 请求的两个关键部分配置不当：headers 和 body。
1.1 headers 配置冲突：Content-Type 的重要性
原始代码中，fetch 请求的配置对象内存在两个 headers 键：
let respuesta = fetch(fichero, {
method: "POST",
headers: { // 第一个 headers
'Content-Type': 'application/x-www-form-urlencoded',
},
body: '...',
headers: {"Content-type": "application/text; charset=UTF-8"} // 第二个 headers
})在 JavaScript 对象字面量中，如果存在重复的键，后面的值会覆盖前面的值。因此，fetch 实际发送的 Content-Type 是 application/text; charset=UTF-8，而非 PHP 期望的 application/x-www-form-urlencoded。
当 Content-Type 被设置为 application/text 时，PHP 不会将请求体（body）中的数据自动解析填充到 $_POST 超全局变量中。$_POST 变量主要用于接收 application/x-www-form-urlencoded 或 multipart/form-data 类型的请求体数据。
1.2 body 数据构建错误：硬编码与变量值
原始代码中的 body 部分也存在一个常见错误：
立即学习“PHP免费学习笔记（深入）”；
body: 'nom=tp_curso&versio=vr_curso&programa=pr_curso& &fitxers=fp_curso&videos=vp_curso&ncurs=curso_actualizar',
这里，body 被构建为一个硬编码的字符串，其中 tp_curso、vr_curso 等被当作字面量字符串发送，而不是其对应的变量值。这意味着无论前端变量的值是什么，后端接收到的 nom 永远是字符串 "tp_curso"，而不是变量 tp_curso 实际存储的用户输入值。此外，URL 参数中也存在一个多余的 & 符号，可能导致解析异常。
2. 解决方案：正确构建 fetch 请求
要确保 fetch 请求能够正确地将参数传递给 PHP 后端，我们需要在 headers 和 body 两方面进行修正。
2.1 统一 headers 配置
首先，将 headers 合并为一个单一的对象，并确保 Content-Type 设置为 application/x-www-form-urlencoded，以便 PHP 能够正确解析 $_POST。
const fichero = "/proves/php/accion_formulario.php";
let tp_curso = document.getElementById("actualizar_nombre").value;
let vr_curso = document.getElementById("version_lenguaje").value;
let pr_curso = document.getElementById("programa_curso").value;
let fp_curso = document.getElementById("ficheros_curso").value;
let vp_curso = document.getElementById("videos_curso").value;
let nc_curso = "curso_actualizar"; // 假设这是从某个地方获取的值
// 修正后的 fetch 请求结构（仅 headers 部分）
let respuesta = fetch(fichero, {
method: "POST",
headers: {
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8', // 确保 Content-Type 正确且唯一
},
// body 部分将在下一节详细介绍
body: '',
})
.then(response => response.text())
.then(text => {
alert(text);
})
.catch(error => alert("请求发生错误: " + error));2.2 body 数据传递的多种策略
正确构建 body 是将变量值传递给后端的关键。以下是几种推荐的方法：
2.2.1 使用模板字符串与 encodeURIComponent
这是最直接的方式，通过 JavaScript 的模板字符串（反引号 `）将变量值嵌入到 URL 编码的字符串中。务必使用encodeURIComponent()` 函数对每个变量值进行编码，以处理特殊字符（如空格、&、= 等）。
// ... (变量定义同上)
let bodyData = `nom=${encodeURIComponent(tp_curso)}&versio=${encodeURIComponent(vr_curso)}&programa=${encodeURIComponent(pr_curso)}&fitxers=${encodeURIComponent(fp_curso)}&videos=${encodeURIComponent(vp_curso)}&ncurs=${encodeURIComponent(nc_curso)}`;
let respuesta = fetch(fichero, {
method: "POST",
headers: {
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
},
body: bodyData,
})
// ... (then/catch 链同上)2.2.2 使用 URLSearchParams 对象
URLSearchParams 接口提供了一种方便的方式来处理 URL 的查询字符串。它可以接收一个对象或二维数组作为参数，并自动进行 URL 编码，生成符合 application/x-www-form-urlencoded 格式的字符串。
// ... (变量定义同上)
const params = new URLSearchParams();
params.append('nom', tp_curso);
params.append('versio', vr_curso);
params.append('programa', pr_curso);
params.append('fitxers', fp_curso);
params.append('videos', vp_curso);
params.append('ncurs', nc_curso);
let respuesta = fetch(fichero, {
method: "POST",
headers: {
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
},
body: params, // 直接传递 URLSearchParams 对象
})
// ... (then/catch 链同上)或者更简洁的方式：
// ... (变量定义同上)
const params = new URLSearchParams({
nom: tp_curso,
versio: vr_curso,
programa: pr_curso,
fitxers: fp_curso,
videos: vp_curso,
ncurs: nc_curso
});
let respuesta = fetch(fichero, {
method: "POST",
headers: {
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
},
body: params, // 直接传递 URLSearchParams 对象
})
// ... (then/catch 链同上)2.2.3 使用 FormData 对象（推荐用于表单数据）
如果你的参数来源于一个 HTML
然后，在 JavaScript 中：
const fichero = "/proves/php/accion_formulario.php";
const form = document.getElementById('accion_form');
const formData = new FormData(form);
// 如果有不在表单中的额外参数，可以手动添加
// formData.append('extra_param', 'extra_value');
let respuesta = fetch(fichero, {
method: "POST",
// 当使用 FormData 时，浏览器会自动设置 Content-Type，无需手动设置
// headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' }, // 不需要此行
body: formData,
})
.then(response => response.text())
.then(text => {
alert(text);
})
.catch(error => alert("请求发生错误: " + error));3. PHP 后端接收与处理
在 PHP 后端，只要前端以 application/x-www-form-urlencoded 或 multipart/form-data 格式发送数据，就可以通过 $_POST 超全局变量轻松访问参数。
n_curso = $n_curso; // ... $params = []; $params[0] = $n_curso; $params[1] = $titulo_curso; $params[2] = $version_curso; $params[3] = $programa_curso; $params[4] = $dir_ficheros_curso; $params[5] = $dir_videos_curso; // 打印接收到的参数 echo ""; print_r($params); echo ""; // 也可以直接打印 $_POST 来查看所有接收到的数据 // echo ""; // print_r($_POST); // echo ""; ?>4. 完整示例
以下是一个结合了 URLSearchParams 和修正后的 PHP 代码的完整示例：
HTML & JavaScript (前端)
Fetch 参数传递示例 课程信息更新
PHP (后端: /proves/php/accion_formulario.php)
5. 注意事项与总结
- Content-Type 至关重要： 始终确保 fetch 请求的 Content-Type 与你发送的数据格式匹配。对于表单数据，通常是 application/x-www-form-urlencoded 或 multipart/form-data。
- 数据编码： 在手动构建 body 字符串时，务必使用 encodeURIComponent() 对每个参数值进行编码，以避免特殊字符导致的问题。URLSearchParams 和 FormData 会自动处理编码。
- FormData 的便捷性： 如果数据来源于 HTML 表单，FormData 是最推荐的方法，因为它简化了数据收集和 Content-Type 的设置。
- PHP $_POST： $_POST 变量主要用于接收 application/x-www-form-urlencoded 和 multipart/form-data 类型的 POST 请求数据。对于其他 Content-Type（如 application/json），你需要通过 file_get_contents('php://input') 手动读取请求体并进行解析。
- 安全性： 在 PHP 后端接收到任何来自前端的数据时，始终进行输入验证、过滤和转义，以防止 SQL 注入、XSS 等安全漏洞。
通过理解并正确应用这些原则，可以有效避免 fetch 请求参数在 PHP 后端无法正确接收的问题，从而构建健壮的前后端交互。
