phpjqueryhtml实现点击不刷新加载更多的实例代码.pdfVIP

基本原理：页面载入时， jQuery 向后台请求数据， PHP 通过查询数据库将最新的几条 记录显示在列表页，在列表页的底部有个“更多”链接，通过触发该链接，向服务端发送 Ajax 请求，后台 PHP 程序得到请求参数，并作出相应，获取数据库相应的记录并以 JSON 的形式返回给前台页面，前台页面 jQuery 解析 JSON 数据，并将数据追加到列表页。其实 就是 Ajax 分页效果。 HTML 首先要引入 jquery 库和 jquery.more.js 插件， jquery.more.js 已经将许多功能都封装好了， 并提供了参数配置的功能。 lt;script type=text/javascript src=jquery.jsgt;lt;/scriptgt;nbsp; lt;script type=text/javascript src=jquery.more.jsgt;lt;/scriptgt; xhtml 结构如下： lt;div id=moregt; nbsp;nbsp; lt;div class=single_itemgt; nbsp; nbsp; nbsp; lt;div class=element_headgt; nbsp; nbsp; nbsp; nbsp; lt;div class=dategt;lt;/divgt; nbsp; nbsp; nbsp; nbsp; lt;div class=authorgt;lt;/divgt; nbsp; nbsp; nbsp;nbsp; lt;/divgt; nbsp; nbsp; nbsp;nbsp; lt;div class=contentgt;lt;/divgt; nbsp;nbsp; lt;/divgt; nbsp;nbsp; lt;a href=javascript:; class=get_moregt;:: 点击加载更多内容 ::lt;/agt; lt;/divgt; 值得一提的是，样式 single_item ，get_more 是和 jquery.more.js 插件关联的，你也可以 取另外的 class 名字，但是在配置的时候一定要将对应的 class 写上。 CSS #more{margin:10px auto;width: 560px; border: 1px solid #999;} nbsp; nbsp; nbsp; nbsp; .single_item{padding: 20px; border-bottom: 1px dotted #d3d3d3;}nbsp; .author{position: absolute; left: 0px; font-weight:bold; color:#39f}nbsp; .date{position: absolute; right: 0px; color:#999}nbsp; .content{line-height:20px; word-break: break-all;}nbsp; .element_head{width: 100%; position: relative; height: 20px;}nbsp; .get_more{margin:10px; text-align:center}nbsp; .more_loader_spinner{width:20px; height:20px; margin:10px auto; background: url(loader.gif) no-repeat;} 以上 CSS 是本例中定制的，当然，大家可以在实际项目中定制不同的样式。注意， more_loader_spinner 是定义加载动画图片的。 jQuery $(function(){ nbsp;nbsp;