Web编程新手求助：点击左侧菜单不跳转，在右侧加载PHP内容

步骤1：修改侧边栏链接 #

将侧边栏中需要触发无刷新加载的链接，替换为带data-url属性的格式，取消默认跳转：

<!-- 侧边栏修改后的代码片段 -->
<ul>
    <li><a href="#" data-url="./adminView/viewCustomers.php"><i class="fas fa-user"></i>Ügyfelek</a></li>
    <li><a href="#" data-url="./adminView/viewOffers.php"><i class="fas fa-file"></i>Ajánlatok</a></li>
    <li><a href="#" data-url="./adminView/viewOrders.php"><i class="fas fa-user"></i>Rendelések</a></li>
</ul>

注：data-url的值对应你要加载的PHP文件路径，按需替换。

步骤2：添加AJAX加载脚本 #

在index.php的</body>标签前插入以下JavaScript，监听菜单点击并实现无刷新加载：

<script>
// 获取右侧内容区元素
const contentArea = document.querySelector('.users-table');

// 为所有带data-url的侧边栏链接绑定点击事件
document.querySelectorAll('.sidebar a[data-url]').forEach(link => {
    link.addEventListener('click', function(e) {
        // 阻止默认页面跳转
        e.preventDefault();
        const targetUrl = this.getAttribute('data-url');

        // 显示加载提示（可选）
        contentArea.innerHTML = '<p style="padding: 20px;">加载中...</p>';

        // 发起AJAX请求获取内容
        fetch(targetUrl)
            .then(response => {
                if (!response.ok) throw new Error('无法加载内容');
                return response.text();
            })
            .then(htmlContent => {
                // 将返回的HTML插入内容区
                contentArea.innerHTML = htmlContent;
                // 高亮当前选中的菜单（可选）
                document.querySelectorAll('.sidebar a').forEach(item => item.classList.remove('active'));
                this.classList.add('active');
            })
            .catch(error => {
                contentArea.innerHTML = `<p style="padding: 20px; color: red;">加载失败：${error.message}</p>`;
            });
    });
});
</script>

步骤3：优化内容页输出（以viewCustomers.php为例） #

将原有的纯文本输出改为结构化的表格，并复用公共数据库连接：

1. 先创建公共数据库连接文件db.php，放在根目录：

<?php
define('DB_SERVER', 'localhost');
define('DB_USERNAME', 'root');
define('DB_PASSWORD', '');
define('DB_NAME', 'test');

$conn = mysqli_connect(DB_SERVER, DB_USERNAME, DB_PASSWORD, DB_NAME);

if ($conn === false) {
    die("Nem sikerült csatlakozni..." . mysqli_connect_error());
}
?>

2. 修改viewCustomers.php：

<?php
// 引入公共数据库连接
require_once '../db.php';

$sql = "SELECT * FROM users";
$result = $conn->query($sql);

if (!$result) {
    die("Rossz kérés: " . $conn->error);
}
?>
<table style="width: 100%; border-collapse: collapse; margin: 20px 0;">
    <thead>
        <tr style="background-color: #f5f5f5;">
            <th style="border: 1px solid #ddd; padding: 12px;">ID</th>
            <th style="border: 1px solid #ddd; padding: 12px;">Felhasználónév</th>
        </tr>
    </thead>
    <tbody>
        <?php while($row = $result->fetch_assoc()): ?>
        <tr>
            <td style="border: 1px solid #ddd; padding: 12px;"><?php echo htmlspecialchars($row["id"]); ?></td>
            <td style="border: 1px solid #ddd; padding: 12px;"><?php echo htmlspecialchars($row["username"]); ?></td>
        </tr>
        <?php endwhile; ?>
    </tbody>
</table>

注：使用htmlspecialchars()转义输出内容，避免XSS安全问题。

步骤4：可选优化（高亮当前菜单） #

在你的index-sytle.css中添加高亮样式：

.sidebar a.active {
    background-color: #2c3e50;
    color: #fff;
}

内容的提问来源于stack exchange，提问作者Balázs Szmetana