如何在HTML表格添加查询功能并实现MySQL实时数据检索

一、添加搜索表单 #

在页面的<h2>Header</h2>下方插入搜索表单，让用户输入关键词并提交：

<div class="search-bar">
  <form method="GET" action="">
    <input 
      type="text" 
      name="search" 
      placeholder="输入关键词搜索（如受试者池、用户邮箱）..." 
      value="<?php echo isset($_GET['search']) ? htmlspecialchars($_GET['search']) : ''; ?>"
    >
    <button type="submit">搜索</button>
  </form>
</div>

二、修改SQL查询逻辑（防注入+动态过滤） #

原脚本直接查询全部数据，需要改为根据搜索关键词动态生成查询语句，必须使用预处理语句防止SQL注入：

<?php
// 基础联表查询语句
$sql = "SELECT * FROM raw_data 
        LEFT JOIN user ON user.id = raw_data.user_id
        LEFT JOIN brain_signature ON brain_signature.raw_data_id = raw_data.id";

$result = null;

// 处理搜索请求
if(isset($_GET['search']) && trim($_GET['search']) !== ''){
    $searchTerm = "%".trim($_GET['search'])."%";
    // 扩展WHERE条件，可根据需求调整搜索字段（比如只搜subject_pool、email）
    $sql .= " WHERE raw_data.subject_pool LIKE ? 
              OR user.email LIKE ? 
              OR raw_data.degree_centrality LIKE ?";
    
    // 预处理语句防注入
    $stmt = mysqli_prepare($conn, $sql);
    mysqli_stmt_bind_param($stmt, "sss", $searchTerm, $searchTerm, $searchTerm);
    mysqli_stmt_execute($stmt);
    $result = mysqli_stmt_get_result($stmt);
} else {
    // 无搜索参数时查询全部数据
    $result = mysqli_query($conn, $sql);
}
?>

三、实现实时展示的两种方式 #

方式1：同步页面刷新（简单直接） #

上面的代码已经支持同步提交——用户点击搜索按钮后，页面刷新并展示过滤后的结果，适合不需要无刷新的场景。

方式2：AJAX异步无刷新实时展示 #

如果要实现用户输入时实时更新结果（无需点击按钮），添加以下JS代码，并修改PHP逻辑支持AJAX请求：

1. 添加前端AJAX代码

在表单下方插入JS：

<script>
const searchInput = document.querySelector('input[name="search"]');
const tableContainer = document.querySelector('.table-container table');

// 监听输入事件，实时请求数据
searchInput.addEventListener('input', function() {
    const searchTerm = this.value.trim();
    let url = '?ajax=1';
    if(searchTerm.length >= 2){ // 输入至少2个字符再触发搜索，减少请求
        url += `&search=${encodeURIComponent(searchTerm)}`;
    }

    fetch(url)
    .then(response => response.text())
    .then(html => {
        tableContainer.innerHTML = html;
    })
    .catch(err => console.error('搜索请求失败:', err));
});
</script>

2. 修改PHP处理AJAX请求

在原脚本的SQL查询逻辑前，添加AJAX请求判断，仅返回表格内容：

<?php
// 处理AJAX请求，只返回表格的表头和数据行
if(isset($_GET['ajax'])){
    // 复制上面的SQL查询逻辑到这里
    // 输出表头
    ?>
    <tr align="center">
        <th>ID</th>
        <th>Subeject Pool</th>
        <th>Degree Centrality</th>
        <th>Betweeness Centrality</th>
        <th>Path Length</th>
        <th>Clustering</th>
        <th>Globale Efficiency</th>
        <th>Local Efficiency</th>
        <th>User</th>
        <th>Reference</th>
    </tr>
    <?php
    // 输出数据行
    while($row = $result->fetch_assoc()){
        ?>
        <tr>
            <td><?php echo htmlspecialchars($row['id'])?></td>
            <td><?php echo htmlspecialchars($row['subject_pool'])?></td>
            <td><?php echo htmlspecialchars($row['degree_centrality'])?></td>
            <td><?php echo htmlspecialchars($row['betweeness_centrality'])?></td>
            <td><?php echo htmlspecialchars($row['path_length'])?></td>
            <td><?php echo htmlspecialchars($row['clustering'])?></td>
            <td><?php echo htmlspecialchars($row['globale_efficiency'])?></td>
            <td><?php echo htmlspecialchars($row['local_efficiency'])?></td>
            <td><?php echo htmlspecialchars($row['email'])?></td>
            <td>
                <a href="<?php echo htmlspecialchars($link_prefix . $row['connectivity_matrix'])?>" target="_blank">
                    <?php echo htmlspecialchars($link_prefix . $row['connectivity_matrix'])?>
                </a>
            </td>
        </tr>
        <?php
    }
    exit; // 终止脚本，不输出页面其他部分
}
?>

四、关键注意事项 #

• SQL注入防护：绝对不能直接将用户输入拼接到SQL语句中，必须使用预处理语句。
• XSS防护：所有从数据库取出并输出到页面的内容，都要用htmlspecialchars()转义，防止跨站脚本攻击。
• 搜索字段调整：可根据实际需求修改WHERE条件中的搜索字段，比如针对数值型字段（如degree_centrality）可以改为范围查询（BETWEEN ? AND ?）而非模糊匹配。

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