PHP+AJAX无法从MySQL拉取数据到HTML页面的问题求助

问题说明 #

我是PHP新手，希望实现点击侧边导航栏链接时，通过AJAX从MySQL数据库拉取数据，替换HTML页面中原有的图片进行展示。目前已确认数据库连接正常，直接访问PHP页面能看到完整数据，但点击HTML页面的侧边栏链接时，数据无法显示。

代码中的核心问题 #

1. PHP查询与输出不匹配：原SQL仅查询Stat字段，但输出时调用了Name、Description、Location等字段，导致这些字段值为空；同时循环中遗漏了<tr>标签，表格结构错误，无法正常渲染。
2. AJAX事件处理错误：在myAjax和myAjab函数内部重复绑定.zmdi的点击事件，未正确阻止当前<a>标签的默认跳转行为，导致页面刷新，AJAX请求被中断。
3. 错误处理被禁用：XMLHttpRequest的错误处理代码被注释，无法排查请求失败原因（如文件路径错误、PHP运行报错等）。

修复后的代码 #

1. 修复PHP代码（以getstat.php为例） #

<?php
// 创建数据库连接
$conn = mysqli_connect('localhost:3308', 'dev14dbuser', 'iYzcKDu8pROZ3SXc','dev14db');

// 检查连接
if (!$conn) {
    die("连接错误: " . mysqli_connect_error($conn));
}

// 修改SQL查询，获取所有需要的字段
$sql = "SELECT Name, Description, Location, Stat, Image FROM `totk` ORDER BY Stat";
$result = mysqli_query($conn, $sql);

// 输出表格结构
echo "<table>
<tr>
<th>名称</th>
<th>描述</th>
<th>获取地点</th>
<th>属性</th>
<th>图片</th>
</tr>";

// 循环输出数据行，补充缺失的<tr>标签
while ($row = mysqli_fetch_assoc($result)) {
    echo "<tr>";
    echo "<td>" . htmlspecialchars($row["Name"]) . "</td>";
    echo "<td>" . htmlspecialchars($row["Description"]) . "</td>";
    echo "<td>" . htmlspecialchars($row["Location"]) . "</td>";
    echo "<td>" . htmlspecialchars($row["Stat"]) . "</td>";
    // 若Image字段是图片路径，转换为img标签展示
    echo "<td><img src='" . htmlspecialchars($row["Image"]) . "' alt='装备图片' style='max-width:100px;' /></td>";
    echo '</tr>';
}
echo '</table>';

// 关闭连接
mysqli_close($conn);
?>

注：使用htmlspecialchars()防止XSS注入，同时完善图片展示逻辑。

2. 修复HTML中的JS代码（使用jQuery简化） #

<script>
  // 拉取全部数据
  function myAjax() {
    // 阻止<a>标签默认跳转行为
    event.preventDefault();
    // 隐藏初始图片
    $("#center").hide();
    // 发起AJAX请求
    $.get("getarmor.php", function(data) {
      $("#txtHint").html(data);
    }).fail(function(xhr) {
      // 错误提示
      alert("请求失败：" + xhr.status + " - " + xhr.statusText);
    });
  }

  // 按属性拉取数据
  function myAjab() {
    event.preventDefault();
    $("#center").hide();
    $.get("getstat.php", function(data) {
      $("#txtHint").html(data);
    }).fail(function(xhr) {
      alert("请求失败：" + xhr.status + " - " + xhr.statusText);
    });
  }
</script>

3. 修复导航栏链接 #

<div id="sidebar">
    <header>
      <a href="index.html">
          <img id="logo" src="TotK_Logo.webp" alt="">Head Armors</a>
    </header>
    <ul class="nav">
      <li>
        <a href="" onclick="myAjax(event)">
          <i class="zmdi zmdi-view-dashboard"></i> 查看全部
        </a>
      </li>

      <li>
          <a href="" onclick="myAjab(event)">
              <i class="zmdi zmdi-stats"></i>按属性筛选
          </a>
      </li>
      <li>
        <a href="map.html">
          <i class="zmdi zmdi-map"></i> 地图
        </a>
      </li>
      
    </ul>
  </div>

额外建议 #

• 检查getarmor.php的代码逻辑，确保和getstat.php一样修复字段查询和表格结构问题。
• 打开浏览器开发者工具（F12）的Network面板，查看AJAX请求的状态和响应内容，方便快速定位问题。

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