帝国cms通过ajax请求获取json数据的方式实现点击加载更多-大学生阅读DXPANG

一、首先我们要保证页面上引入了jq库。

二、然后我们的列表容器，给该容器加上id为more。例如原来是这样：

<ul>  
  <li>..</li>  
  <li>..</li>  
</ul>  

我们要修改为这样

<ul id="more">  
  <li>..</li>  
  <li>..</li>  
</ul>  

这里的主要目的是在获取到数据后，将数据格式化追加到这个容器尾部，实现点击无限加载。

三、在页面上添加下面的js代码。

<script>  
jQuery(function() {  
var pg=1;  
$('.tip-txt').click(function(){   
$.getJSON("/e/extend/cmsdxmore.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>  

这段js的主要作用是绑定点击事件，对数据处理的php文件发出请求，获取到json数据后格式化并追加到结尾。

四、上面我们讲到要绑定点击事件，这里我们要在页面上添加一个按钮，并给按钮添加class类名为tip-txt

五、制作php文件，代码如下，这个文件就是我们的数据处理程序，用于查询帝国cms的数据表并返回json数据，文件我们存储在/e/extend/cmsdxmore.php。

<?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; //注消操作类变量  
?>  
六、到这里，我们的工作就完成了。本文是一个引子，实现起来原理也并不复杂，多谢旁小编在此感谢大家的耐心，接下来我们还可以根据这个原理来做更多的事，这个就看大家的需求了。

扫一扫手机访问