建站技术网专注分享网站建设技术,网站建设教程,真正帮你学会做网站技术,轻松解决网站建设过程中遇到的常见问题,为广大站长服务。 网站地图 | 收藏本站 | 订阅
域名投资,就来找米网,认准网址:www.zhaomi.cc 专业仿站,就到仿站网:www.fangzhan.org
  站内公告: ·帝国cms教程内容已更新,欢迎关注     ·建站技术网采用阿里云服务器,备案已通    
您当前的位置:建站技术网 > cms教程 > 帝国cms教程

帝国cms通过jquery请求获取json数据的方式实现点击加载更多

时间:2019-05-12 11:12:41  来源:网络收集  整理: 建站技术网 www.jzjsw.com     点击:0次

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

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

折叠XML/HTML 代码
  1. <ul>  
  2.   <li>..</li>  
  3.   <li>..</li>  
  4. </ul>  

我们要修改为这样

折叠XML/HTML 代码
  1. <ul id="more">  
  2.   <li>..</li>  
  3.   <li>..</li>  
  4. </ul>  

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

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

折叠JavaScript 代码
  1. <script>  
  2. jQuery(function() {  
  3. var pg=1;  
  4. $('.tip-txt').click(function(){   
  5. $.getJSON("/e/extend/cmsdxmore.php",{page:pg,cd:1},function(json){   
  6. if(json){   
  7. var str = "";   
  8. $.each(json,function(index,array){   
  9. var str="<div class=/////"item/////"><a href=////""+array['url']+"/////">"+array['title']+"</a></div>";  
  10. $("#more").append(str);   
  11. });   
  12. pg++;  
  13. }  
  14. else{   
  15. $(".tip").show().html("已经到底了...");   
  16. return false;   
  17. }   
  18. });   
  19. } );  
  20. });  
  21. </script>  

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

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

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

折叠PHP 代码
  1. <?php  
  2. require('../class/connect.php'); //引入数据库配置文件和公共函数文件  
  3. require('../class/db_sql.php'); //引入数据库操作文件  
  4. $link=db_connect(); //连接MYSQL  
  5. $empire=new mysqlquery(); //声明数据库操作类  
  6. $editor=1; //声明目录层次  
  7.   
  8. $page = intval($_GET['page']);  //获取请求的页数   
  9. $cla = intval($_GET['cd']);  //获取请求的页数   
  10. $start = $page*6;   
  11. $sql=$empire->query("select * from {$dbtbpre}ecms_news order by newstime desc limit $start,6");  
  12. while($r=$empire->fetch($sql)){  
  13. $pic=$r[titlepic]?$r[titlepic]:'/e/data/images/notimg.gif';  
  14. $sayList[] = array('url'=>$url'title'=>$r['title']);   
  15. }  
  16. echo json_encode($sayList);   
  17. db_close(); //关闭MYSQL链接  
  18. $empire=null; //注消操作类变量  
  19. ?>  

六、到这里,我们的工作就完成了。本文是一个引子,实现起来原理也并不复杂,cms大学小编在此感谢大家的耐心,接下来我们还可以根据这个原理来做更多的事,这个就看大家的需求了。

标签:
文章标题:帝国cms通过jquery请求获取json数据的方式实现点击加载更多
文章网址:http://www.jzjsw.com/cmsJiaocheng/diguocms/11364.html
上一篇:帝国cms模板在文章作者或信息来源为空时输出默认内容的方法
下一篇:帝国cms安装QQ登录插件后审核不通过的解决办法
来顶一下
返回首页
返回首页
相关文章
    无相关信息
推荐资讯
如何通过SEO优化排名赚钱?SEO赚钱方法
如何通过SEO优化排名赚
seo优化教程:网站seo内容优化
seo优化教程:网站seo
SEO细节:企业SEO如何快速为新站做出效果
SEO细节:企业SEO如何
电商技术将如何发展?2018年有这五个大胆预测
电商技术将如何发展?
最新文章
栏目更新
栏目热门