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 <form> 元素，FormData 对象是最佳选择。它能够轻松地从表单中收集所有输入字段的数据，并自动构建成适合 multipart/form-data 或 application/x-www-form-urlencoded 格式的请求体。
注意： 当使用 FormData 对象作为 fetch 的 body 时，不需要手动设置 Content-Type header。浏览器会自动设置正确的 Content-Type（通常是 multipart/form-data 并包含一个 boundary 字符串）。
首先，确保你的 HTML 表单元素具有 name 属性：
<form id="accion_form">
<input type="text" id="actualizar_nombre" name="nom" value="Web开发">
<input type="text" id="version_lenguaje" name="versio" value="PHP 8.0">
<input type="text" id="programa_curso" name="programa" value="后端编程">
<input type="text" id="ficheros_curso" name="fitxers" value="/files/webdev">
<input type="text" id="videos_curso" name="videos" value="/videos/webdev">
<!-- 假设 ncurs 也是表单的一部分，或者你可以手动添加 -->
<input type="hidden" name="ncurs" value="curso_actualizar">
<button type="submit">更新</button>
</form>然后，在 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 超全局变量轻松访问参数。
<?php // PHP 代码：accion_formulario.php // 确保在生产环境中对输入进行验证和过滤 $n_curso = $_POST["nom"] ?? ''; // 使用 ?? 运算符提供默认值，防止未设置的索引报错 $titulo_curso = $_POST["versio"] ?? ''; $version_curso = $_POST["programa"] ?? ''; $programa_curso = $_POST["fitxers"] ?? ''; $dir_ficheros_curso = $_POST["videos"] ?? ''; $dir_videos_curso = $_POST["ncurs"] ?? ''; // 修正了变量名以匹配前端 // 假设这些是某个类的属性 // $this -> 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 "<pre>"; print_r($params); echo "</pre>"; // 也可以直接打印 $_POST 来查看所有接收到的数据 // echo "<pre>"; // print_r($_POST); // echo "</pre>"; ?>
4. 完整示例
以下是一个结合了 URLSearchParams 和修正后的 PHP 代码的完整示例：
HTML & JavaScript (前端)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Fetch 参数传递示例</title>
</head>
<body>
<h1>课程信息更新</h1>
<form id="courseUpdateForm">
<label for="actualizar_nombre">课程名称:</label>
<input type="text" id="actualizar_nombre" value="Web开发基础"><br><br>
<label for="version_lenguaje">语言版本:</label>
<input type="text" id="version_lenguaje" value="JavaScript ES6"><br><br>
<label for="programa_curso">课程程序:</label>
<input type="text" id="programa_curso" value="前端框架"><br><br>
<label for="ficheros_curso">文件目录:</label>
<input type="text" id="ficheros_curso" value="/course/files"><br><br>
<label for="videos_curso">视频目录:</label>
<input type="text" id="videos_curso" value="/course/videos"><br><br>
<button type="button" onclick="sendUpdate()">更新课程</button>
</form>
<script>
const fichero = "/proves/php/accion_formulario.php"; // 确保路径正确
function sendUpdate() {
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_更新_ID_123"; // 示例值
const params = new URLSearchParams({
nom: tp_curso,
versio: vr_curso,
programa: pr_curso,
fitxers: fp_curso,
videos: vp_curso,
ncurs: nc_curso
});
fetch(fichero, {
method: "POST",
headers: {
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
},
body: params,
})
.then(response => {
if (!response.ok) {
throw new Error('网络请求失败，状态码: ' + response.status);
}
return response.text();
})
.then(text => {
alert("后端响应:\n" + text);
})
.catch(error => alert("请求发生错误: " + error));
}
</script>
</body>
</html>PHP (后端: /proves/php/accion_formulario.php)
<?php
header('Content-Type: text/plain; charset=UTF-8'); // 设置响应头，便于在 alert 中显示
// 假设这些是某个类的属性，这里为了演示直接使用局部变量
$n_curso = $_POST["nom"] ?? 'N/A';
$titulo_curso = $_POST["versio"] ?? 'N/A';
$version_curso = $_POST["programa"] ?? 'N/A';
$programa_curso = $_POST["fitxers"] ?? 'N/A';
$dir_ficheros_curso = $_POST["videos"] ?? 'N/A';
$dir_videos_curso = $_POST["ncurs"] ?? 'N/A';
$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 "成功接收到参数：\n";
echo "-------------------\n";
echo "课程名称 (nom): " . $params[0] . "\n";
echo "语言版本 (versio): " . $params[1] . "\n";
echo "课程程序 (programa): " . $params[2] . "\n";
echo "文件目录 (fitxers): " . $params[3] . "\n";
echo "视频目录 (videos): " . $params[4] . "\n";
echo "课程标识 (ncurs): " . $params[5] . "\n";
echo "-------------------\n";
echo "原始 POST 数据:\n";
print_r($_POST);
?>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 后端无法正确接收的问题，从而构建健壮的前后端交互。
