手机网站为了提高前端设计体验的时候,我们都会给前端加些比较好的交互式体验,下面就来说说如何用ajax无限加载分页,这是几年前做的笔记了,是帝国cms列表页无刷新加载,不会用的朋友可以留言,或者到我们的”厦门网站设计“网站技术栏目找,这里一般都是我们几个老技术员的经验笔记,还有很多关于PC、手机网站前端设计加体验的好技术文档。话不多说了下面就贴上代码给大家看看。
第一步网页引入JQ库
<script type="text/javascript" src="/js/jquery.js"></script>
第二步:
在网页内添加:<div id="more">(这个主要用于JQ加载数据把内容添加这个ID后面)
第三步:添加下面的JS
<script>“
jQuery(function() {
var pg=1;
$('.tip-txt').click(function(){
$.getJSON("/extend/clmore.php",{page:pg,cd:1},function(json){
if(json){
var str = "";
$.each(json,function(index,array){
var str="<div class=\\"item\\"><a href=\\""+array['url']+"/\\">"+array['title']+"</a></div>";
$("#more").append(str);
});
pg++;
}
else{
$(".tip").show().html("已经到底了...");
return false;
}
});
} );
});
</script>
第四步:二次开发建立一个clmore.php文件生成json数据
<?php
require('../../class/connect.php'); //引入数据库配置文件和公共函数文件
require('../../class/db_sql.php'); //引入数据库操作文件
$link=db_connect(); //连接MYSQL
$empire=new mysqlquery(); //声明数据库操作类
$editor=1; //声明目录层次
$page = intval($_GET['page']); //获取请求的页数
$cla = intval($_GET['cd']); //获取请求的页数
$start = $page*6;
$sql=$empire->query("select * from {$dbtbpre}ecms_news order by newstime desc limit $start,6");
while($r=$empire->fetch($sql)){
$pic=$r[titlepic]?$r[titlepic]:'/e/data/images/notimg.gif';
$sayList[] = array('url'=>$url, 'title'=>$r['title']);
}
echo json_encode($sayList);
db_close(); //关闭MYSQL链接
$empire=null; //注消操作类变量
?>
第五步:完成上面四步,执行成功。