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

安卓微粉助手v2.1.2涨粉玩网营销工具破解版

微粉助手是一款专为社交电商用户设计的一站式营销工具，旨在帮助用户高效管理私域流量，提升营销效率和业绩增长。结合了一键群发、智能加人、精准清粉、自动跟圈及多媒体获客等核心功能，微粉助...

手机版软件

Dizaynersk_oupa昨天

0439

龙卷风网络FM收音机_PC端_V7.9.2021.701

龙卷风收音机CRadio是一款免费的网络播放软件，软件收录了全世界三千多个电台频道，你可以在这里听到财经、音乐、娱乐、社会新闻等频道，包含国语、粤语。不仅仅如此，软件还提供本地音频文件播...

PC版软件

casinoqoel29天前

04810

前言

友情提示

实现步骤

总结

分类

1PHPSiYU同城源码开源

2PC文字自动转LOGO生成器工具最新版本

3星链：阿特拉斯之战/Starlink: Battle for Atlas

4安卓微粉助手v2.1.2涨粉玩网营销工具破解版

5影像社PR系统调色课程视频后期调色纯干货

6vue3开发的壁纸网站模板，纯JavaScript开发，完整源代码，有录播

7PPT模板君v2.1.5全场景海量优质模板高级版

8PHP全新UI购物商城系统源码

9全新UI网址发布页源码，带黑白模式、自动网址检测

10EXCEL表格助手v1.0自动化操作等任务提升

11忍者龙剑传4豪华版/NINJA GAIDEN 4 Deluxe Edition

12安卓准星怪兽游戏设置画质优化游戏辅助APP

13聚焦6大内向天生优势内向孩子最优养育方案

14B站视频下载器Bili23-Downloader v1.70绿色版

15软件开发个人页面-采用响应式html源码

16一键OCR提取文字v1.0.0.111支持微信4.X

17宝可梦传说：Z-A/Pokemon LEGENDS Z-A

18安卓老地方影院3.0.3免登录去除会员纯净版

19图灵-JAVA互联网架构师第五期价值12880元

20Windows暂停更新工具v1.0.0.5华为出品单文件

友情链接