如何点击标签按钮时仅重载div内PHP include文件无需整页刷新

核心通过原生AJAX实现局部请求，仅更新对应标签的容器内容，不需要整页刷新，可按需选择「首次点击才加载」或「每次点击都重载最新内容」两种模式。

第一步：修改HTML结构 #

删除所有.tabcontent容器内的PHP引入代码，仅保留空容器，避免页面初始化就加载全部PHP文件：

<!-- 标签按钮部分代码保持原有逻辑不变 -->
<div id="stockinven" class="tabcontent"></div>
<div id="storeinbounddiv" class="tabcontent"></div>
<div id="inboundinventory" class="tabcontent"></div>
<div id="outboundinventory" class="tabcontent"></div>
<div id="historyinventory" class="tabcontent"></div>
<div id="inboundedit" class="tabcontent"></div>
<div id="outboundedittab" class="tabcontent"></div>

第二步：修改JavaScript逻辑 #

先建立标签ID和对应PHP文件的映射表，再修改原有的openCity函数，增加请求加载逻辑：

// 标签ID与对应PHP文件的映射，后续修改路径只需要调整这个对象即可
const tabPhpMap = {
  'stockinven': 'stockinventoryavailabilty.php',
  'storeinbounddiv': 'stockinventoryupcomingstock.php',
  'inboundinventory': 'stockinventoryinbound.php',
  'outboundinventory': 'stockinventoryoutbound.php',
  'historyinventory': 'stockinventoryhistory.php',
  'inboundedit': 'stockinboundedit.php',
  'outboundedittab': 'stockoutboundedit.php'
}
// 可选：已加载标签的缓存标记，不需要每次点击都重复请求的场景使用
const loadedTabs = new Set()

// 原有标签切换函数不用修改，仅更新openCity核心逻辑
function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  const targetTab = document.getElementById(cityName);
  targetTab.style.display = "block";
  evt.currentTarget.className += " active";

  // --------------- 新增内容加载逻辑 ---------------
  // 如果需要每次点击都重载最新内容，删除下方if判断、loadedTabs相关代码即可
  if (!loadedTabs.has(cityName)) {
    // 可选：加载状态提示，优化用户体验
    targetTab.innerHTML = '<p>内容加载中...</p>';
    // 发起请求拉取PHP文件内容
    fetch(tabPhpMap[cityName])
      .then(response => {
        if (!response.ok) throw new Error('请求失败');
        return response.text();
      })
      .then(html => {
        targetTab.innerHTML = html;
        loadedTabs.add(cityName); // 标记为已加载，后续切换无需重复请求
      })
      .catch(error => {
        targetTab.innerHTML = '<p>内容加载失败，请刷新重试</p>';
        console.error('加载错误：', error);
      });
  }
}

两种需求切换说明 #

• 实现「点击标签时才加载对应PHP文件，加载过的标签切换时不再重复请求」：直接使用上述代码即可，保留缓存逻辑
• 实现「每次点击标签都重载对应PHP的最新内容」：删除代码中if (!loadedTabs.has(cityName))判断、loadedTabs.add(cityName)和const loadedTabs = new Set()定义即可，每次点击都会拉取最新内容

注意：PHP文件路径请根据实际项目目录结构调整映射表tabPhpMap中的路径即可。

内容的提问来源于stack exchange，提问作者A. Chithrai