本文介绍如何使用原生 javascript（fetch api）配合 html 结构优化，实现点击菜单项时仅局部刷新表格中“主体区域”的内容，避免整页重载与视觉闪烁，提升用户体验。
在传统 PHP 模板结构中，开发者常通过 include 将页面拆分为 header、body、footer 等部分，但每次导航都会触发完整页面刷新，造成延迟与闪烁。现代解决方案是将主体内容容器化 + AJAX 异步加载，仅更新
区域，其余（如顶部菜单、底部版权）保持不变。
✅ 推荐结构改造（语义化 & 可维护）
首先，摒弃用
布局页面（不符合语义化标准，且不利于响应式与 SEO）。改用语义化 HTML5 结构：
<meta charset="UTF-8"><title>动态内容加载示例</title><script src="main.js" defer></script><header><?php include 'top+menu.php'; ?></header><main id="body"><!-- 初始内容可由 PHP 渲染，或留空由 JS 首次加载 --></main><footer><?php include 'footer.php'; ?></footer>
? 提示：top+menu.php 中的菜单链接需添加统一类名（如 class="menu-link"）并携带真实目标 URL（如 href="about.php"），便于 JS 统一绑定事件。
✅ JavaScript 核心逻辑（main.js）
以下代码使用现代 Fetch API 实现无刷新加载，并增强错误处理与用户体验：
// main.js
const loadContent = (url) => {
const bodyContainer = document.getElementById('body');
if (!bodyContainer) return;
// 显示加载状态（可选）
bodyContainer.innerHTML = '<p>加载中…</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/learn/7014" title="AJAX技术—无刷新获取数据相关课件"><img
src="https://img.php.cn/upload/webcode/000/000/164/6152aff85d347738.jpg" alt="AJAX技术—无刷新获取数据相关课件" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/learn/7014" title="AJAX技术—无刷新获取数据相关课件" class="overflowclass">AJAX技术—无刷新获取数据相关课件</a>
<p class="overflowclass">AJAX技术—无刷新获取数据相关课件</p>
</div>
<a rel="nofollow" href="/xiazai/learn/7014" title="AJAX技术—无刷新获取数据相关课件" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>';
fetch(url)
.then(response => {
if (!response.ok) {
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
}
return response.text(); // 注意：此处必须用 .text() 获取 HTML 字符串
})
.then(html => {
bodyContainer.innerHTML = html; // 安全注入服务端返回的 HTML
// 可选：触发自定义事件，通知其他模块内容已更新
document.dispatchEvent(new Event('content-loaded'));
})
.catch(err => {
console.error('加载失败:', err);
bodyContainer.innerHTML = '<p class="error">内容加载失败，请稍后重试。</p>';
});
};
// 代理所有菜单链接点击（支持动态添加的菜单项）
document.addEventListener('click', e => {
const link = e.target.closest('.menu-link');
if (link && link.href) {
e.preventDefault();
loadContent(link.href);
}
});
⚠️ 关键注意点：
- fetch().then(response.text()) 必须显式调用 .text() 才能获取 HTML 字符串；若误用 .json() 或直接 .innerHTML(response) 会导致类型错误；
- 使用 e.target.closest() 实现事件委托，兼容后续通过 JS 动态插入的菜单项；
- 服务端 PHP 文件（如 about.php）应仅输出纯 HTML 片段（不含 等全局标签），否则会破坏当前页面结构；
- 若需执行新加载内容中的 JS（如初始化图表、表单验证），应在 loadContent 的 .then() 中手动调用对应函数，或监听 content-loaded 自定义事件。
✅ 后端配合建议（PHP 示例）
确保被加载的 PHP 文件（如 about.php）只输出业务内容：
<!-- about.php -->
<h2>关于我们</h2>
<p>这里是公司简介内容…</p>
<!-- 不要包含 <!DOCTYPE>, <html>, <body> 等全局标签 -->
✅ 总结
- ✅ 核心思路：用
替代
内嵌 PHP include，通过 Fetch 加载纯 HTML 片段并注入；- ✅ 技术选型：原生 Fetch 足够轻量，无需引入 jQuery；
- ✅ 体验优化：添加加载提示、错误反馈、事件通知，让交互更健壮；
- ❌ 避免陷阱：不滥用
做布局；不返回完整 HTML 文档；不忽略 CORS（若跨域需后端配置 Access-Control-Allow-Origin）。通过以上改造，你将获得一个快速、稳定、符合现代 Web 标准的局部刷新方案——既保留 PHP 模板的开发效率，又具备 SPA 的流畅体验。
|
