PbootCMS 制作 Ajax 无刷新加载列表内容教程
前段时间在交流群里，有站长朋友咨询 PbootCMS 是否可以实现 Ajax 无刷新加载内容。
这个需求不属于常规模板制作的基础内容，因此单独整理成一篇 PbootCMS 使用技巧系列教程，专门讲解 Ajax 加载的实现思路和代码示例。
在实际建站过程中，我们经常会遇到以下场景：
点击“加载更多”显示新内容
页面滚动到底部自动加载文章
不刷新页面，提高用户体验
好消息是：得益于 PbootCMS 自带的 API 接口，实现 Ajax 加载非常方便。
友情提示（SEO 必看）
Ajax 无刷新加载虽然在视觉和交互上比较“高级”，
但对 SEO 并不友好，搜索引擎默认无法抓取 Ajax 动态加载的内容。
建议使用场景：
新闻列表 / 资讯列表
图片瀑布流
用户体验优先的页面
不建议使用：
核心 SEO 关键词页面
需要完整收录的栏目首页
使用前请权衡 SEO 与体验。
实现效果说明
本文将演示两种常见的 Ajax 加载方式：
点击按钮加载更多内容
页面滚动到底部自动加载更多内容
一、点击“加载更多”按钮实现 Ajax 加载
1️⃣ 添加加载按钮
<button id="More" class="more" type="button">点击加载更多</button>
2️⃣ 页面默认显示内容
页面初始显示 2 条文章（示例结构，实际可自行美化）
<div class="list">
{pboot:list scode=3 num=2}
<div class="title">[list:title]</div>
<div class="desc">[list:description]</div>
<hr>
{/pboot:list}
</div>说明：
scode=3：栏目 IDnum=2：默认显示 2 条
3️⃣ 引入 jQuery
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
4️⃣ Ajax 核心 JS 代码
<script>
var Page = parseInt('{page:current}') + 1; // 当前页 +1
var Num = 2; // 每页读取条数
var Dom = jQuery('.list'); // 内容容器
jQuery('#More').on('click', function(){
var url = '/api.php/list/3/page/' + Page + '/num/' + Num;
jQuery.ajax({
type: 'POST',
url: url,
dataType: 'json',
data: {
appid: '{pboot:appid}',
timestamp: '{pboot:timestamp}',
signature: '{pboot:signature}',
},
success: function(response){
if(response.code){
jQuery.each(response.data, function(index, value){
var html = '<div class="title">'+value.title+
'</div><div class="desc">'+value.description+
'</div><hr>';
Dom.append(html);
});
Page += 1;
}else{
jQuery('#More').html('<span>没有更多内容了</span>');
}
},
error:function(){
console.log('请求失败');
}
});
});
</script>✅ 效果：
每点击一次按钮，页面无刷新加载 2 篇新文章。
二、页面滚动到底部自动加载内容
原理与点击加载一致，只需把触发方式从点击事件换成滚动监听。
滚动加载 JS 示例
<script>
var Page = parseInt('{page:current}') + 1;
var Num = 2;
var Dom = jQuery('.list');
var load = true;
jQuery(window).scroll(function(){
var WindowTop = jQuery(window).scrollTop();
var WindowHeight = jQuery(window).outerHeight();
var DocHeight = jQuery(document).height();
if((WindowTop + WindowHeight) >= DocHeight && load){
load = false;
var url = '/api.php/list/3/page/' + Page + '/num/' + Num;
jQuery.ajax({
type: 'POST',
url: url,
dataType: 'json',
data: {
appid: '{pboot:appid}',
timestamp: '{pboot:timestamp}',
signature: '{pboot:signature}',
},
success:function(response){
if(response.code){
jQuery.each(response.data, function(index, value){
var html = '<div class="title">'+value.title+
'</div><div class="desc">'+value.description+
'</div><hr>';
Dom.append(html);
});
Page += 1;
load = true;
}
}
});
}
});
</script>✅ 效果：
滚动到页面底部，自动加载新内容，非常适合瀑布流页面。
常见问题说明
Q1：API 请求失败？
检查
appid / timestamp / signature是否正确API 是否开启
服务器是否开启伪静态
Q2：加载重复内容？
确保
Page += 1正常执行使用
load开关防止重复请求
总结
PbootCMS 自带 API，让 Ajax 加载变得非常简单
点击加载 / 滚动加载 都可以灵活实现
用户体验提升明显，但 SEO 需谨慎使用
如果你在 PbootCMS 模板制作或功能扩展 中遇到问题，
欢迎整理需求，后续我会持续更新 PbootCMS 使用技巧系列教程。
