在使用 javascript 的 fetch api 向 php 后端发送 post 请求时，开发者常遇到 php 的 $_post 变量为空或接收到空数组的问题。这通常源于 fetch 请求的两个关键部分配置不当：headers 和 body。
原始代码中，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 类型的请求体数据。
原始代码中的 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 参数中也存在一个多余的 & 符号，可能导致解析异常。
要确保 fetch 请求能够正确地将参数传递给 PHP 后端，我们需要在 headers 和 body 两方面进行修正。
首先，将 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));正确构建 body 是将变量值传递给后端的关键。以下是几种推荐的方法：
这是最直接的方式，通过 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 链同上)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 链同上)如果你的参数来源于一个 HTML
以上就是前端 fetch 到 PHP 后端数据传输的常见陷阱与解决方案的详细内容，更多请关注php中文网其它相关文章！
PHP怎么学习？PHP怎么入门？PHP在哪学？PHP怎么学才快？不用担心，这里为大家提供了PHP速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
198
收藏
