刷新页面后如何根据点击的div加载对应PHP文件？

嘿，我完全懂你想要的效果——之前你用AJAX无刷新加载内容，但现在希望点击菜单选项后整页刷新，同时让main_content区域自动加载对应的PHP文件对吧？

这里有两种靠谱的方案，你可以根据自己的需求选择：

方案1：结合URL参数+AJAX加载（前端主导） #

这个方案保留了部分AJAX逻辑，但通过URL参数来控制刷新后加载的内容：

修改后的完整代码 #

<div class="menu">
  <div id="home" class="menu_align active_one">Home</div>
  <div id="write" class="menu_align">Write</div>
  <div id="activity" class="menu_align">Notifications</div>
</div>
<div id="main_content"></div>

<script src="jquery-3.2.1.js"></script>
<script>
$(document).ready(function() {
  // 从URL中获取page参数，默认显示home
  const currentPage = new URLSearchParams(window.location.search).get('page') || 'home';
  
  // 加载对应内容并更新菜单激活状态
  loadTargetContent(currentPage);
  
  // 菜单点击事件：跳转到带参数的页面，触发整页刷新
  $('.menu_align').click(function() {
    const targetPageId = $(this).attr('id');
    // home页面可以不带参数，或者统一带参数都可以
    const targetUrl = targetPageId === 'home' 
      ? window.location.pathname 
      : `${window.location.pathname}?page=${targetPageId}`;
    
    window.location.href = targetUrl;
  });
});

// 封装加载内容的函数
function loadTargetContent(pageId) {
  // 匹配对应的PHP文件
  const phpFileMap = {
    'home': 'home.php',
    'write': 'write.php',
    'activity': 'notifs.php'
  };
  
  const targetFile = phpFileMap[pageId] || 'home.php';
  $('#main_content').load(targetFile);
  
  // 更新菜单的激活样式
  $('.menu_align').removeClass('active_one');
  $(`#${pageId}`).addClass('active_one');
}
</script>

工作原理 #

1. 点击菜单时，通过window.location.href跳转到带page参数的当前页面，触发整页刷新。
2. 页面刷新后，JS读取URL中的page参数，根据参数匹配对应的PHP文件，用.load()加载到main_content。
3. 同时自动更新菜单的active_one类，保持选中状态和内容对应。

方案2：PHP直接渲染内容（后端主导，更高效） #

如果不想用AJAX二次请求，可以让PHP直接在页面刷新时渲染main_content的内容，这样更高效：

HTML+PHP代码 #

<div class="menu">
  <div id="home" class="menu_align <?php echo ($_GET['page'] ?? 'home') === 'home' ? 'active_one' : ''; ?>">Home</div>
  <div id="write" class="menu_align <?php echo ($_GET['page'] ?? '') === 'write' ? 'active_one' : ''; ?>">Write</div>
  <div id="activity" class="menu_align <?php echo ($_GET['page'] ?? '') === 'activity' ? 'active_one' : ''; ?>">Notifications</div>
</div>

<div id="main_content">
  <?php
  // 允许的页面列表，防止恶意文件包含
  $allowedPages = ['home', 'write', 'activity'];
  $currentPage = $_GET['page'] ?? 'home';
  
  // 校验页面是否合法，默认加载home
  if (!in_array($currentPage, $allowedPages)) {
    $currentPage = 'home';
  }
  
  // 匹配对应的PHP文件
  $targetPhpFile = $currentPage === 'activity' ? 'notifs.php' : "{$currentPage}.php";
  // 加载内容
  include($targetPhpFile);
  ?>
</div>

<script src="jquery-3.2.1.js"></script>
<script>
$(document).ready(function() {
  // 菜单点击事件：跳转到带参数的页面触发刷新
  $('.menu_align').click(function() {
    const targetPageId = $(this).attr('id');
    const targetUrl = targetPageId === 'home' 
      ? window.location.pathname 
      : `${window.location.pathname}?page=${targetPageId}`;
    
    window.location.href = targetUrl;
  });
});
</script>

工作原理 #

1. 点击菜单时同样跳转到带page参数的页面，触发刷新。
2. 页面刷新时，PHP直接读取URL参数，校验合法性后，用include()把对应PHP文件的内容渲染到main_content里。
3. 同时PHP直接控制菜单的active_one类，不需要JS处理。

这个方案少了一次AJAX请求，页面加载速度更快，也更安全（因为做了页面白名单校验，防止恶意文件包含）。

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