jQuery+PHP实现浏览更多内容

Ajax加载的基本原理：当页面载入时，jQuery向后台请求数据，PHP通过查询数据库将最新的几条记录显示在列表页，在列表页的底部有个“查看更多”的链接，通过触发该链接，向服务端发送Ajax请求，后台PHP程序得到请求参数，并作出响应，获取数据库相应的记录并以JSON的形式返回给前台页面，前台页面jQuery解析JSON数据，并将数据追加到列表页。其实就是Ajax分页效果。
首先要引入jquery库和jquery.more.js插件，jquery.more.js已经将许多功能都封装好了，并提供了参数配置的功能。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.more.js"></script>

xhtml结构如下：

<div id="more"> <div class="single_item"> <div class="element_head"> <div class="date"></div> <div class="author"></div> </div> <div class="content"></div> </div> <a href="javascript:;" class="get_more">::点击加载更多内容::</a>
</div>

需要指出的是，样式single_item，get_more是和jquery.more.js插件关联的，你也可以取另外的class名字，但是在配置的时候一定要将对应的class写上。
CSS样式如下：

#more{margin:10px auto;width: 560px; border: 1px solid #999;}
.single_item{padding: 20px; border-bottom: 1px dotted #d3d3d3;}
.author{position: absolute; left: 0px; font-weight:bold; color:#39f}
.date{position: absolute; right: 0px; color:#999}
.content{line-height:20px; word-break: break-all;}
.element_head{width: 100%; position: relative; height: 20px;}
.get_more{margin:10px; text-align:center}
.more_loader_spinner{width:20px; height:20px; margin:10px auto; background: url(loader.gif) no-repeat;}

以上CSS是本例中定制的，当然，大家可以在实际项目中定制不同的样式。注意，more_loader_spinner是定义加载动画图片的。
jQuery部分如下：

　$(function(){ $('#more').more({'address': 'data.php'}) });

使用很简单，配置了后台地址：data.php，来看data.php是怎么处理数据的。
PHP部分：
data.php文件：
链接数据库：

<?phprequire_once('connect.php'); $last = $_POST['last']; $amount = $_POST['amount']; $user = array('demo1','demo2','demo3','demo3','demo4'); $query=mysql_query("select * from say order by id desc limit $last,$amount"); while ($row=mysql_fetch_array($query)) { $sayList[] = array( 'content'=>$row['content'], 'author'=>$user[$row['userid']], 'date'=>date('m-d H:i',$row['addtime']) ); } echo json_encode($sayList);

data.php接收前台页面提交过来的两个参数，$_POST['last']即开始记录数，$_POST['amount']即单次显示记录数，看SQL语句就明白，其实就是分页中用到的语句。
然后将查询的结果以JSON格式输出，PHP的任务就完成了。
最后来看下jquery.more.js的参数配置：

　　'amount'  : '10',   //每次显示记录数 'address'  : 'comments.php', //请求后台的地址 'format'  : 'json',   //数据传输格式 'template' : '.single_item', //html记录DIV的class属性 'trigger'  : '.get_more', //触发加载更多记录的class属性 'scroll'  : 'false',  //是否支持滚动触发加载 'offset'  : '100',   //滚动触发加载时的偏移量

转载于:https://www.cnblogs.com/qhorse/p/4757129.html

jQuery+PHP实现浏览更多内容相关推荐

JS滚动条到网页底部自动加载更多内容
2019独角兽企业重金招聘Python工程师标准>>> <html> <head> <meta charset="gb18030" ...
jq获取当前完整html,jquery怎样获取html的内容？
jquery怎样获取html的内容?下面本篇文章给大家介绍一下使用jquery获取html内容的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. jquery获取html元素内容 ...
jQuery点击查看更多，列表陆续显示
jQuery点击查看更多图片演示效果: jQuery点击查看更多 HTML代码: <div class="gallerywrap"><div class=&qu ...
php ajax 上拉显示更多,PHP+Ajax点击加载更多内容－这个效果好，速度快，只能点击更多加载，不能滚动自动加载...
这个效果好,速度快,只能点击更多加载,不能滚动自动加载一.HTML部分 ::点击加载更多内容:: 引入jQuery插件和jquery.more.js加载更多插件 jQuery $(function( ...
【插件】jQuery.iviewer----图片浏览（滚动放大缩小问题解决）
[插件]jQuery.iviewer----图片浏览(滚动放大缩小问题解决) 参考文章: (1)[插件]jQuery.iviewer----图片浏览(滚动放大缩小问题解决) (2)https://ww ...
jq修改iframe html代码,使用jQuery替换iframe的所有内容（包括doctype和html标签）
在stackoverflow上还有很多其他帖子提出几乎相同的问题,但在迄今为止我读到的所有答案中,他们没有解决如何实质上替换iframe的整个文档,包括DOCTYPE和html标签.使用jQuery替 ...
php js获取表单内容,jquery form表单获取内容以及绑定数据_javascript技巧
在日常开发的过程中,难免会用到form表单,我们需要获取表单的数据保存到数据库,或者拿到后台的一串json数据,要将数据绑定到form表单上,这里我写了一个基于jquery的,formHelp插件,使 ...
(原创)c#学习笔记05--变量的更多内容01--类型转换01--隐式转换
第五章变量的更多内容本章内容: ● 如何在类型之间进行隐式和显式转换 ● 如何创建和使用枚举类型 ● 如何创建和使用结构类型 ● 如何创建和使用数组 ● 如何处理字符串值首先要讨论的主 ...
Linux 命令之 less -- 分屏上下翻页浏览文件内容（查看文件内容/显示文件内容）
文章目录介绍语法格式常用选项浏览文本内容的快捷键向前滚屏向后滚屏跳跃搜索退出 less 参考示例 (一)查看文件 (二)ps查看进程信息并通过less分页显示 (三)查看命令历史使用 ...

jQuery+PHP实现浏览更多内容

jQuery+PHP实现浏览更多内容相关推荐

最新文章

热门文章