如何使用 Fetch API 与 PHP 正确获取并弹窗显示数据库记录-php教程-PHP中文网

如何使用 Fetch API 与 PHP 正确获取并弹窗显示数据库记录

本文详解如何通过 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

编写健壮的PHP代码，规避类型转换陷阱、数组怪癖及常见安全漏洞。

下载

<?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() 的返回值。
data 是数组，不是对象：你收到的是 [{"id":"5","name":"moore Lizzy"}]，因此必须用 data.forEach(...)，而非 Object.keys(data).forEach(...) —— 后者适用于对象遍历，对数组会遍历索引字符串（如 "0"），导致 json["0"] 才是对象，逻辑冗余且易出错。