为什么照搬W3Schools AJAX数据库教程仅能拉取第一条数据？

问题根源 #

1. 前端下拉框参数不匹配
   你提供的前端代码中，第二个客户的option value值为NORTS （末尾带有空格），但你提到导入数据库时已经去除了所有字段数据的空格，意味着数据库中存储的对应CustomerID为NORTS（无空格），参数传递时带空格的值和数据库内的存储值不一致，自然无法查询到结果。第三个客户的情况你可以自行核对数据库内存储的CustomerID是否和前端option的value值完全一致，包括大小写、有无特殊字符。
2. PHP代码缺少查询结果校验
   现有PHP代码不管数据库是否查询到匹配记录，都会直接输出表格结构和绑定的变量，当没有匹配结果时，绑定的$cid、$cname等变量全部为空，就会出现你看到的仅显示表头、无数据的情况。
3. 第一个客户表格显示异常的排查方向
   你可以先打开浏览器的开发者工具，切换到网络面板，选择第一个客户时查看getcustomer.php接口返回的完整内容，确认返回的HTML表格结构是否完整，多数情况是样式冲突或者返回内容有额外的输出字符（比如PHP文件开头/结尾有多余的空格、换行、BOM头）导致HTML结构被破坏。

修复方案 #

• 首先修正前端下拉框的value值，确保每一个option的value和数据库中存储的CustomerID完全一致，你可以直接导出数据库customers表的CustomerID字段值，逐个对照替换前端的option value。
• 优化PHP代码，增加结果存在性判断，示例修改如下：

<?php
$mysqli = new mysqli("nottelling", "noway", "notachance", "nope");
if($mysqli->connect_error) {
  exit('Could not connect');
}

$sql = "SELECT CustomerID, CompanyName, ContactName, Address, City, PostalCode, Country
FROM customers WHERE CustomerID = ?";

$stmt = $mysqli->prepare($sql);
$stmt->bind_param("s", $_GET['q']);
$stmt->execute();
$stmt->store_result();
// 增加结果判断
if ($stmt->num_rows == 0) {
    echo "未找到匹配的客户信息";
    $stmt->close();
    $mysqli->close();
    exit;
}
$stmt->bind_result($cid, $cname, $name, $adr, $city, $pcode, $country);
$stmt->fetch();
$stmt->close();
$mysqli->close();

echo "<table>";
echo "<tr>";
echo "<th>CustomerID</th>";
echo "<td>" . $cid . "</td>";
echo "<th>CompanyName</th>";
echo "<td>" . $cname . "</td>";
echo "<th>ContactName</th>";
echo "<td>" . $name . "</td>";
echo "<th>Address</th>";
echo "<td>" . $adr . "</td>";
echo "<th>City</th>";
echo "<td>" . $city . "</td>";
echo "<th>PostalCode</th>";
echo "<td>" . $pcode . "</td>";
echo "<th>Country</th>";
echo "<td>" . $country . "</td>";
echo "</tr>";
echo "</table>";
?>

• 排查表格显示异常时，先确认PHP文件是纯代码文件，开头<?php前没有任何字符，结尾?>后也不要留任何换行、空格，避免额外输出破坏HTML结构。

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