本文详解如何通过 javascript fetch api 调用 php 接口获取 json 格式数据库数据，并正确解析、遍历并 alert 显示 id 和 name 字段，解决因 promise 链写法错误或 json 结构误判导致的空弹窗问题。
本文详解如何通过 javascript fetch api 调用 php 接口获取 json 格式数据库数据，并正确解析、遍历并 alert 显示 id 和 name 字段，解决因 promise 链写法错误或 json 结构误判导致的空弹窗问题。
在使用 fetch() 请求 PHP 后端返回的数据库记录时，常见问题并非后端无响应，而是前端对 Promise 链和 JSON 数据结构的处理不严谨——例如将 .then() 错误地附加在 response.json()（一个 Promise）之后却未正确等待其解析完成，或忽略响应体实际为数组而非对象，从而导致 alert(r.id) 报错或静默失败。
✅ 正确做法是：链式调用 .then()，确保先完整解析 JSON，再对结果进行安全遍历。以下是优化后的完整方案：
✅ 推荐写法（现代 Promise 链 + 错误处理）
fetch("http://localhost/record/rec.php", {
method: "GET",
headers: { "Content-Type": "application/json" }
})
.then(response => {
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return response.json(); // 返回解析后的 Promise，供下个 .then 消费
})
.then(data => {
console.log("Parsed data:", data); // 确认输出：[{ "id": "5", "name": "moore Lizzy" }]
// ✅ data 是数组，直接 forEach 遍历每个对象
data.forEach(record => {
alert(`ID: ${record.id}\nName: ${record.name}`);
});
})
.catch(error => {
console.error("Fetch failed:", error);
alert("加载数据失败，请检查网络或服务器状态");
});⚠️ 关键注意事项：
-
PHP 端必须设置正确的响应头，避免浏览器 MIME 类型拦截：
<?php header('Content-Type: application/json; charset=utf-8'); // 模拟数据库查询 $id = "5"; $name = "moore Lizzy"; // 注意：原文中 PHP 的 $name 拼写为 "More Lizy"，需与 JS 中字段名一致 $result_arr[] = ["id" => $id, "name" => $name]; echo json_encode($result_arr, JSON_UNESCAPED_UNICODE); // 推荐加 JSON_UNESCAPED_UNICODE 防中文乱码 ?> -
不要嵌套 .then() 在 response.json() 内部（如原代码 response.json().then(...)），这会破坏链式可读性且易漏掉错误分支；应让 response.json() 作为独立 .then() 的返回值。
立即学习“PHP免费学习笔记（深入）”；
data 是数组，不是对象：你收到的是 [{"id":"5","name":"moore Lizzy"}]，因此必须用 data.forEach(...)，而非 Object.keys(data).forEach(...) —— 后者适用于对象遍历，对数组会遍历索引字符串（如 "0"），导致 json["0"] 才是对象，逻辑冗余且易出错。
? 进阶建议：
- 如需多条记录批量提示，建议改用 console.table(data) 调试，或构建 DOM 列表替代频繁 alert()（影响用户体验）；
- 生产环境务必替换 alert() 为 Toast 提示或 Modal 组件；
- 增加 response.headers.get("content-type") 校验，确保返回确实是 application/json。
遵循以上结构与规范，即可稳定、可靠地实现前端 Fetch + PHP 后端的数据拉取与展示。
