ajax php加载列表实例,jQuery+PHP+ajax实现加载更多内容列表
我们在一些微博网站上可以碰到这样的应用,微博内容列表没有使用分页条,而是一次加载一定数量的记录显示在列表页,当用户浏览到列表页底部时,可以通过单击“查看更多”来加载更多记录。本文我将结合jQuery和PHP给大家讲述如何实现这种应用。
基本原理:页面载入时,jQuery向后台请求数据,PHP通过查询数据库将最新的几条记录显示在列表页,在列表页的底部有个“更多”链接,通过触发该链接,向服务端发送Ajax请求,后台PHP程序得到请求参数,并作出相应,获取数据库相应的记录并以JSON的形式返回给前台页面,前台页面jQuery解析JSON数据,并将数据追加到列表页。其实就是Ajax分页效果。
首先要引入jquery库和jquery.more.js插件,jquery.more.js已经将许多功能都封装好了,并提供了参数配置的功能
html代码如下(可根据自己内容修改其样式):
点击查看更多
值得一提的是,样式single_item,get_more是和jquery.more.js插件关联的,你也可以取另外的class名字,但是在配置的时候一定要将对应的class写上。
css样式 :
#more{margin:10px auto;width: 400px; border: 1px solid #999;}
.single_item{padding: 20px; border-bottom: 1px dotted #d3d3d3;}
.author{ float:left;font-weight:bold; color:#39f}
.date{ float:right; 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是怎么处理数据的。
require_once('connect.php');
$last = $_POST['last'];
$amount = $_POST['amount'];
$query=mysql_query("select * from say limit $last,$amount");
while ($row=mysql_fetch_array($query)) {
$sayList[] = array(
'content'=>$row['content'], //前面那个content相当于是前台的class名称,下面的author,date一样
'author'=>$row['userid'],
'date'=>$row['addtime'],
'text'=>$row['text'],
);
}
echo json_encode($sayList);
?>
data.php接收前台页面提交过来的两个参数,$_POST['last']即开始记录数,$_POST['amount']即单次显示记录数,看SQL语句就明白,其实就是分页中用到的语句。
然后将查询的结果以JSON格式输出,PHP的任务就完成了。
最后来看下jquery.more.js的参数配置。
var settings = {
'amount' : '10', //每次显示记录数
'address' : 'comments.php', //请求后台的地址
'format' : 'json', //数据传输格式
'template' : '.single_item', //html记录DIV的class属性
'trigger' : '.get_more', //触发加载更多记录的class属性
'scroll' : 'false', //是否支持滚动触发加载
'offset' : '100', //滚动触发加载时的偏移量
}
ajax php加载列表实例,jQuery+PHP+ajax实现加载更多内容列表相关推荐
- JavaWeb加强之JSON、jQuery、Ajax、Java正则表达式、过滤器、监听器、模板引擎FreeMarker
过滤器.监听器,以及JSON.Ajax和正则表达式等开发必备技能,并学习文件上传和验证码等功能开发. 2.4.1 JSON基础 JSON的基础语法,以及流行JSON框架FastJSON的使用. 内容: ...
- html ajax提交表单实例,jQuery使用$.ajax提交表单完整实例
本文实例讲述了jQuery使用$.ajax提交表单的方法.分享给大家供大家参考,具体如下: 首先,新建Login.html页面: /p> "http://www.w3.org/TR/x ...
- 用ajax修改成功怎么返回页面,jquery操作ajax返回的页面元素
这两天工作不忙,正好从朋友那里拿到一个某个应用的开发文档,相关数据放在了mongodb里,自己电脑可以本地开启服务器然后通过给的借口来获取数据.由于这是一个比较大比较全的一个完整项目,也没有那么多经历 ...
- html form通过ajax提交表单提交数据,Jquery通过Ajax方式来提交Form表单的具体实现
今天刚好看到Jquery的ajax提交数据到服务器的方法,原文是: 保存数据到服务器,成功时显示信息. jQuery 代码: $.ajax({ type: "POST", url: ...
- html中加减号怎么输入,jQuery 实现点击加减号改变input标签中的value值,该怎么解决...
jQuery 实现点击加减号改变input标签中的value值 我想点击左右两边的加减号,让中间input标签中的value属性值做出相应的改变,jQuery怎么实现? ------解决思路 ...
- ajax前台转换json数据库,基于jQuery的ajax功能实现web service的json转化
不过这篇文章的题目我真不知道该怎么起,如果你因为这个差劲的题目错过这个东西,那真的很可惜. 我在做这个东西之前参考了不少文章: 第一步需要做的是如何在Server端把一个datatable转坏为自己需 ...
- ajax 请求成功 再执行javascript,jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法...
jquery中ajax请求后台数据成功后既不执行success也不执行error,此外系统报错:Uncaught SyntaxError: Unexpected identifier at Objec ...
- ajax获取数据添加到表格,Jquery通过AJAX从后台获取数据显示在表格上(复选)
代码: function GetMultiLineSelectTable(tableId, selectIds) { var table = $(tableId); var url = table.d ...
- ajax 获取用户ip地址,利用jQuery实现Ajax获取当前IP地区位置代码
特效描述:利用jQuery实现 Ajax 获取当前IP 地区位置代码.利用jQuery实现Ajax获取当前IP和地区位置代码 代码结构 1. 引入JS 2. HTML代码 AJAX检测ip和地区 $( ...
最新文章
- 一流科技完成5000万人民币A轮融资,高瓴创投独家领投
- micropython esp8266+ssd1306(OLED) 显示中文(示例)
- UVA 10803 Thunder Mountain
- Windows 10下安装Docker Desktop
- 开关电源磁性元件理论及设计pdf_邵革良首席科学家丨高性价比PFC电源设计及其电感技术...
- 2019如何转换2010_9102年,你还不知道PPT怎么转换成视频吗?小心落伍了
- centos6.5 安装mono
- 学习笔记之——YEDDA
- Redis数据结构之有序集合对象(zset)
- 清理 Anaconda 的 pkgs
- 小米-9-14-笔试
- RK3568外设资源
- 网页加载慢,Initial connection请求偶尔过长
- edb的安装以及带参数使用
- 【SSM-报销单】6.报销单-审核报销单,打款
- SpringBoot项目打包发布
- c语言根据月份判断季节指针,输入年份和月份,判断是否闰年?并根据月份判断是什么季节和有多少天...
- 上海亚商投顾:ChatGPT概念领跌 两市约3800股下跌
- Revit二次开发放样融合CreateSweptBlendGeometry
- 怎样查看自己电脑是否安装了git
热门文章
- 收藏|56张图片带您认识细菌长啥样?
- SCI论文写作视频1.论文的三段式结构
- 英国JIC院士3.8万英镑招博后-植物代谢物与微生物组-截止6月27日
- R语言使用caret包的preProcess函数进行数据预处理:对所有的数据列进行expoTrans指数变换(Exponential transformation、可以处理负数)
- pandas使用fillna函数将dataframe中缺失值替换为空字符串(replace missing value with blank string in dataframe)
- R语言绘制火山图(volcano plot)实战:为差异表达基因(DEGs)添加颜色、基于显著性阈值进行点的颜色美化、为选定基因添加标签
- R语言Welch方差分析(Welch’s ANOVA)实战:Welch方差分析是典型的单因素方差分析的一种替代方法,当方差相等的假设被违反时我们无法使用单因素方差分析,这时候Welch’s出来救场了
- R语言dataframe数据列格式转换(从整型integer转化为浮点型float)
- R语言scale_colour_brewer()函数和scale_fill_brewer()函数调色板及填充ggplot2图像实战
- R语言基于DALEX包进行特征筛选(feature selection)