帝国cms开发点击加载更多：jquery请求获取json数据方式实现

2018-11-0511:44:22网站建设与开发Comments3,327 views字数 1511阅读模式

一、首先我们要保证页面上引入了jq库。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/7659.html

二、然后我们的列表容器，给该容器加上id为more。例如原来是这样：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/7659.html

折叠XML/HTML 代码

我们要修改为这样文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/7659.html

折叠XML/HTML 代码

这里的主要目的是在获取到数据后，将数据格式化追加到这个容器尾部，实现点击无限加载。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/7659.html

三、在页面上添加下面的js代码。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/7659.html

折叠JavaScript 代码

<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数据后格式化并追加到结尾。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/7659.html

四、上面我们讲到要绑定点击事件，这里我们要在页面上添加一个按钮，并给按钮添加class类名为tip-txt文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/7659.html

五、制作php文件，代码如下，这个文件就是我们的数据处理程序，用于查询帝国cms的数据表并返回json数据，文件我们存储在/e/extend/cmsdxmore.php。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/7659.html

折叠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; //注消操作类变量
?>

六、到这里，我们的工作就完成了。本文是一个引子，实现起来原理也并不复杂，cms大学小编在此感谢大家的耐心，接下来我们还可以根据这个原理来做更多的事，这个就看大家的需求了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/7659.html

2024年排名前5 CSS 框架：Bootstrap、Tailwind CSS…