如何用JavaScript和PHP展示表格数据？附代码问题排查请求

我来一步步帮你解决这两个问题，先从第一个开始说起：

这里给你两种常用的实现方案，你可以根据需求选择：

方案一：PHP直接渲染表格（服务器端生成HTML） #

这是最直接的方式，PHP从数据库取数后直接输出完整的表格结构，适合不需要前端异步交互的场景：

<?php
// 引入数据库连接文件
require 'dbcon.php';
// 设置字符集避免乱码
mysqli_set_charset($conn, 'utf8mb4');
// 执行查询
$query = "SELECT PatientID, HospitalRegistrationNo, FirstName, RegistrationDate, Gender FROM patientdemography";
$result = mysqli_query($conn, $query);

// 检查查询是否成功
if (!$result) {
    die("查询失败: " . mysqli_error($conn));
}
?>
<!-- 渲染表格 -->
<table border="1" cellpadding="8" cellspacing="0">
    <thead>
        <tr>
            <th>患者ID</th>
            <th>住院号</th>
            <th>姓名</th>
            <th>注册日期</th>
            <th>性别</th>
        </tr>
    </thead>
    <tbody>
        <?php
        // 循环输出每一行数据
        while ($row = mysqli_fetch_assoc($result)) { ?>
            <tr>
                <!-- 用htmlspecialchars转义，防止XSS攻击 -->
                <td><?php echo htmlspecialchars($row["PatientID"]); ?></td>
                <td><?php echo htmlspecialchars($row["HospitalRegistrationNo"]); ?></td>
                <td><?php echo htmlspecialchars($row["FirstName"]); ?></td>
                <td><?php echo htmlspecialchars($row["RegistrationDate"]); ?></td>
                <td><?php echo htmlspecialchars($row["Gender"]); ?></td>
            </tr>
        <?php } ?>
    </tbody>
</table>
<?php
// 释放资源并关闭连接
mysqli_free_result($result);
mysqli_close($conn);
?>

方案二：AJAX异步加载（JS+PHP分离） #

如果想要页面先加载，再异步获取数据渲染表格（适合需要无刷新更新数据的场景），可以用jQuery实现：

第一步：编写PHP接口文件（比如get_patients.php） #

这个文件负责从数据库取数并返回JSON格式的数据：

<?php
require 'dbcon.php';
mysqli_set_charset($conn, 'utf8mb4');

$query = "SELECT PatientID, HospitalRegistrationNo, FirstName, RegistrationDate, Gender FROM patientdemography";
$result = mysqli_query($conn, $query);

if (!$result) {
    echo json_encode(['error' => '查询失败: ' . mysqli_error($conn)]);
    exit;
}

// 把查询结果转成数组
$patients = [];
while ($row = mysqli_fetch_assoc($result)) {
    $patients[] = $row;
}

// 返回JSON数据
echo json_encode($patients);

mysqli_free_result($result);
mysqli_close($conn);
?>

第二步：前端页面用AJAX请求并渲染表格 #

<table border="1" cellpadding="8" cellspacing="0">
    <thead>
        <tr>
            <th>患者ID</th>
            <th>住院号</th>
            <th>姓名</th>
            <th>注册日期</th>
            <th>性别</th>
        </tr>
    </thead>
    <tbody id="patientTableBody">
        <!-- 动态内容会在这里生成 -->
    </tbody>
</table>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
    $.ajax({
        url: 'get_patients.php',
        type: 'GET',
        dataType: 'json',
        success: function(data) {
            if (data.error) {
                alert(data.error);
                return;
            }
            const tbody = $('#patientTableBody');
            // 循环生成表格行
            data.forEach(patient => {
                const row = `<tr>
                    <td>${patient.PatientID}</td>
                    <td>${patient.HospitalRegistrationNo}</td>
                    <td>${patient.FirstName}</td>
                    <td>${patient.RegistrationDate}</td>
                    <td>${patient.Gender}</td>
                </tr>`;
                tbody.append(row);
            });
        },
        error: function() {
            alert('获取数据失败，请检查服务器状态');
        }
    });
});
</script>

先把你给出的代码片段贴出来方便分析：