PbootCms制作ajax无刷新加载列表内容-铁虎资源网

前言

前段时间，群里有位同学问起Ajax加载的问题，这个不属于模板制作系列教程的内容，因此单独再出一个使用技巧系列的教程。

该系列会写一些pbootcms模板在使用过程中碰到的一些问题，以及问题的解决方案。

大家也可以给我反馈一些问题，有空的时候我会选一些写出来放在这个系列的教程里面。

友情提示

Ajax无刷新加载内容，看起来高大上一点，但是对SEO是不太友好的，所以在使用的时候应该有个取舍。

由于PbootCMS的Api接口的存在，在PbootCMS上实现Ajax加载还是比较方便的。

实现步骤

一、点击更多按钮加载内容

1、首先，添加一个按钮用来触发事件。

`1`	`<button class="more"` `type="submit">点击加载更多</button>`

2、添加默认显示的页面内容（只是演示，结构我就随意写了）

`1`	`<div class="list">`

`2`	`{pboot:list scode=3 num=2}`

`3`	`<div class="title">[list:title]</div>`

`4`	`<div class="desc">[list:description] </div>`

5 <hr>

`6`	`{/pboot:list}`

7 </div>

3、js代码部分，先引入jQuery

`01`	`//先定义一些基本的内容`

02

`03`	`//Page就是第几页，由当前页{page:current} + 1，就是第二页，parseInt确保该数值是Int类型。`

`04`	`var Page = parseInt('{page:current}') + 1;`

05

`06`	`//Num就是每页几条信息，因为列表默认显示的是2条，所以这里设为2，结合上面的第二页实际上就是从第三条信息开始读取。`

`07`	`var Num = 2;`

08

`09`	`//定义内容的Dom位置，也就是读取出来的内容要添加到哪个div里面去。`

`10`	`var Dom = jQuery('.list');`

11

`12`	`//接下来写在点击按钮（'.more'）的时候触发事件`

`13`	`jQuery('#More').on('click',` `function(){`

14

`15`	`//先构建Api的地址，具体的Api地址参数，请参考官方手册。`

`16`	`var url =` `'/api.php/list/3/page/'` `+ Page +` `'/num/'` `+ Num;`

17

`18`	`//开始Ajax提交请求，请求路径就是Api接口`

`19`	`jQuery.ajax({`

20 //请求类型

`21`	`type:` `'POST',`

22 //请求地址

`23`	`url: url,`

`24`	`//返回数据类型`

`25`	`dataType:` `'json',`

`26`	`//请求参数，参考官方Api手册`

27 data: {

`28`	`appid:` `'{pboot:appid}',`

`29`	`timestamp:` `'{pboot:timestamp}',`

`30`	`signature:` `'{pboot:signature}',`

31 },

32 //请求成功

`33`	`success:` `function( response, status ){`

`34`	`//定义Data变量为返回的数据`

`35`	`var Data = response.data;`

`36`	`if( response.code ){`

`37`	`//获取数据成功，进行循环，value就是文章对象`

`38`	`jQuery.each( Data,` `function( index, value ){`

`39`	`//将内容append到列表`

`40`	`var Html =` `'<div class="title">'` `+ value.title +` `'</div><div class="desc">'` `+ value.description +` `'</div><hr>';`

`41`	`Dom.append( Html );`

42 });

`43`	`//分页+1，下次获取下一页的内容`

`44`	`Page += 1;`

`45`	`}` `else` `{`

`46`	`//返回数据错误`

`47`	`jQuery('#More').html('<span>'` `+ Data +` `'</span>');`

48 }

49 },

50 //请求失败

`51`	`error:` `function( xhr, status, error ){`

`52`	`//返回数据异常`

`53`	`console.log( error );`

54 }

55 })

56 })

完成，点击一下加载更多，页面就会无刷新加载2篇文章了。

二、页面滑动到底部加载更多文章

原理同上，只不过改变一下事件，原来是点击按钮触发的，改成滚动监听。

查看源码

打印代码帮助

`01`	`//使用jQuery的scroll()方法来监听页面滚动`

`02`	`jQuery(window).scroll(function(){`

03

`04`	`//当前窗口和页面顶部的距离`

`05`	`var WindowTop = jQuery(window).scrollTop();`

06

`07`	`//可视窗口区域高度`

`08`	`var WindowHeight = jQuery(window).outerHeight();`

09

10 //页面的高度

`11`	`var DocHeight = jQuery(document).height();`

12

`13`	`//定义一个开关`

`14`	`var load =` `true;`

15

`16`	`//判断：（窗口与页面顶部距离 + 窗口高度） >= 页面的高度（也就是滚动到页面底部的时候），并且开关是开启状态，执行ajax加载内容`

`17`	`if( ( WindowTop + WindowHeight ) >= DocHeight && load ==` `true` `){`

18

19 //请求地址

`20`	`var url =` `'/api.php/list/3/page/'` `+ Page +` `'/num/'` `+ Num;`

21

`22`	`//设置开关状态为关闭，防止重复加载`

`23`	`load =` `false;`

24

`25`	`jQuery.ajax({`

26

`27`	`//部分代码省略`

28 ......

29

`30`	`success:` `function( response, status ){`

31

`32`	`var Data = response.data;`

33

`34`	`if( response.code ){`

35

`36`	`//获取数据成功`

`37`	`jQuery.each( Data,` `function( index, value ){`

38 ......

39 });

40

`41`	`//设置开关状态为开启，进行下次加载`

`42`	`load ==` `true;`

43

44 //页码+1

`45`	`Page += 1;`

46

`47`	`}` `else` `{`

48

`49`	`//返回数据错误`

`50`	`jQuery('#More').html('<span>'` `+ Data +` `'</span>');`

51

52 }

53

54 },

55

`56`	`error:function( xhr, status, error ){ ...... }`

57

58 })

59

60 }

61

62 })

总结

Ajax并没有想象中的难度那么大，特别是有了PbootCMS的Api接口之后，获取数据更容易，使用更方便。

资源下载

此资源仅限注册用户下载，请先登录

文章版权归作者所有，未经允许请勿转载。

THE END

综合资源
# 下载 # 资源 # 教程 # 数据 # 模板 # 文章 # 源码 # SEO

老邓电商淘宝开店运营教程直通车（更新11月）

主要内容：直通车、引力魔方、赛马测款、达摩盘人群推广等多个核心内容。通过详细的案例分析和实操演示，帮助学员掌握店铺诊断、爆款拉升、动销计划、人群精准投放等关键技能。课程内容从基础到...

综合资源

test143930419天前

0206

星核维护页v1.0.1HTML源码

本文介绍了一款专注于维护状态展示的工具，提供核心功能包括主题视觉展示、维护状态可视化、实时倒计时和维护进度追踪。辅助功能涵盖维护说明展示、维护日志记录及版权/品牌信息。交互与场景适...

源码

test409274911天前

04711

网站维护停运通知单页HTML源码

自适应手机和电脑端，页面简洁美观，有三个页面，维护前、维护中、维护完，无后台，内容在首页index文件修改只需要设置好维护开始和结束时间，会自动依次按顺序显示三个页面，倒计时结束后会一...

源码

test4783232510天前

02313

Gopeed下载器支持多协程下载v1.8.3便携版

Gopeed是一款开源免费的网络下载工具，界面清爽无广告，兼容HTTP、BT等下载协议，支持多线程，能自定义连接数，高速获取大文件，可以同时进行多个下载任务，进一步提升网络资源获取效率，具备断...

PC版软件

semyanych_dhsi5天前

04713

前言

友情提示

实现步骤

总结

分类

1Web安全正式篇渗透/黑客/linux/网络/攻防/漏洞/kali

2python智能打包exe(Nuitka版)全智能依赖压缩

3曾仕强《深度剖析中国式职场关系课程》

4创意奶砖美食甜品甜点小吃减解压短视频抖音小说推文素材高清竖屏

5嘘, 美女拍摄中/Heroines Through My Lens

6小秋老师亲授《思维提升课》19节课程

710种馅饼技术配方千层饼葱油饼糖酥饼和面调陷资料教程视频教学

8王者荣耀新版国服镜教学无缝飞雷神之术打野镜教学节奏思路

9大话C++(C++编程零基础入门到精通课程)

10进程管理工具Process Explorer v17.09汉化版

11WordPress主题–Betheme v28.2 破解版下载

12StartIsBack++ 2.9.21 for Win10中文破解版

13视频下载器Allavsoft v3.28.7.9473附带注册码

14旅者之憩/旅客休息/Travellers Rest模拟经营

15[网络攻防]数据隐写基础 攻防数据隐写术

16Adobe Bridge 2026简称BR(v16.0.1.18)破解版

17福昕高级PDF编辑器v2025.3.0.357370专业版

1815套牛肉面技术配方牛腩面技术配方清汤牛肉面红烧牛肉面全套教程

19猫meme绿幕素材猫咪跳舞抖音B站喵么么短视频制作剪辑场景背景图

20WordPress多功能主题–Divi主题 Divi Theme v4.27.5 破解版免费下载

友情链接

15[网络攻防]数据隐写基础攻防数据隐写术