如何使用JavaScript Fetch API与PHP正确弹窗提示数据库记录

弹窗为空不是response.json().then(语法写错，是两个核心问题导致JSON解析逻辑静默失败，根本没走到alert分支：

• 前端Fetch Promise链没有返回内层Promise，缺少响应状态校验和错误捕获，出错后没有任何提示
• 后端PHP没有声明JSON响应头，容易出现返回格式不被识别、多余输出导致JSON解析失败的问题

修复方案 #

1. 替换前端JS代码 #

原来的嵌套then写法没有返回Promise，外层不会等待JSON解析完成，也没有捕获异常，直接改成链式调用+错误捕获即可：

fetch("http://localhost/record/rec.php", {
  method: "GET",
})
.then(response => {
  // 先校验接口响应状态
  if (!response.ok) {
    throw new Error('接口请求失败，状态码：' + response.status);
  }
  // 将JSON解析的Promise返回给外层链式调用
  return response.json();
})
.then(data => {
  console.log('解析成功的数据：', data);
  data.forEach(r => {
    alert(`id: ${r.id}`);
    alert(`name: ${r.name}`);
  });
})
.catch(err => {
  // 捕获错误直接弹窗，方便定位问题
  alert('请求出错：' + err.message);
});

2. 修改PHP接口代码 #

在输出JSON之前加响应头，输出后终止执行避免多余内容污染返回格式：

<?php
// 数据库连接逻辑保持原有代码即可
// 必须在所有输出前声明JSON响应头
header('Content-Type: application/json; charset=utf-8');

$id = "5";
$name = "More Lizy";
                
$result_arr = array(
  array(
    "id" => $id,
    "name" => $name
  )
);

echo json_encode($result_arr);
// 终止执行，避免后续多余输出破坏JSON格式
exit;
?>

快速排查指引 #

• 打开浏览器F12控制台，先看有没有CORS跨域报错：如果你的页面是用file://协议直接打开的本地文件，必须把页面放到和接口同域的web服务下，用http://localhost/xxx.html的形式访问，不然会被跨域策略拦截
• 打开F12网络面板，找到rec.php的请求，看响应正文是不是纯JSON内容，有没有夹带PHP报错、多余空格、HTML标签这类非JSON内容，有多余内容的话删掉PHP文件里<?php标签外的冗余代码
• 修复后如果控制台打印的data是正常数组，alert就会正常弹出id和name内容

内容的提问来源于stack exchange，提问作者Nancy Moore