如何在index.html页面内展示MySQL SELECT结果且无需跳转新页面

不需要将整个index.html改为PHP文件，通过AJAX调用独立的PHP查询接口即可实现无刷新在当前页渲染数据的需求，具体实现步骤如下：

1. 编写独立的PHP查询接口 #

新建单独的get_data.php文件处理数据库查询逻辑，最终返回JSON格式的结果即可，示例代码：

<?php
// 设置响应格式为JSON
header('Content-Type: application/json');
// 连接数据库，替换为你自己的数据库配置
$conn = mysqli_connect("localhost", "数据库用户名", "数据库密码", "数据库名");
if (!$conn) {
  echo json_encode(['code' => 1, 'msg' => '数据库连接失败']);
  exit;
}
// 执行查询，替换为你自己的表名和查询条件
$sql = "SELECT * FROM 你的表名";
$result = mysqli_query($conn, $sql);
$data = [];
while ($row = mysqli_fetch_assoc($result)) {
  $data[] = $row;
}
// 返回查询结果
echo json_encode(['code' => 0, 'data' => $data]);
mysqli_close($conn);
?>

2. 在index.html中添加触发按钮和展示容器 #

直接在原有HTML代码里加按钮和用来展示数据的容器即可，不需要修改文件后缀，示例代码：

<!-- 点击加载数据的按钮 -->
<button id="loadDataBtn">加载数据库内容</button>
<!-- 错误提示容器 -->
<p id="errorTip" style="color: red;"></p>
<!-- 数据展示容器，这里用表格举例，也可以替换为纯p标签 -->
<table id="dataTable" border="1" style="display: none; margin-top: 10px;">
  <thead>
    <tr>
      <th>字段1</th>
      <th>字段2</th>
      <!-- 根据你实际的表字段加列 -->
    </tr>
  </thead>
  <tbody></tbody>
</table>

3. 在index.html中添加AJAX请求逻辑 #

在HTML的<script>标签里写请求逻辑，点击按钮时异步拉取PHP接口返回的数据，渲染到页面容器中：

document.getElementById('loadDataBtn').addEventListener('click', function() {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', 'get_data.php', true);
  xhr.onload = function() {
    if (xhr.status === 200) {
      const res = JSON.parse(xhr.responseText);
      if (res.code === 0) {
        const tbody = document.querySelector('#dataTable tbody');
        tbody.innerHTML = '';
        // 遍历数据拼接表格内容
        res.data.forEach(item => {
          const tr = document.createElement('tr');
          tr.innerHTML = `
            <td>${item.字段1}</td>
            <td>${item.字段2}</td>
            <!-- 替换为你实际的字段名 -->
          `;
          tbody.appendChild(tr);
        });
        // 显示表格，隐藏错误提示
        document.getElementById('dataTable').style.display = 'block';
        document.getElementById('errorTip').textContent = '';
      } else {
        document.getElementById('errorTip').textContent = res.msg;
      }
    } else {
      document.getElementById('errorTip').textContent = '请求失败，请检查服务状态';
    }
  };
  xhr.send();
});

注意事项 #

• HTML文件和PHP文件需要部署在同一个服务器环境下运行，避免跨域问题
• 如果查询需要传筛选参数，直接在AJAX请求的URL里拼接参数，PHP端用$_GET接收处理即可
• 也可以用jQuery的$.ajax等封装方法实现相同逻辑，核心思路一致

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