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

帝国cms使用JS+AJAX方式实现文章信息列表动态加载

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

这里cms大学和大家分享一种动态加载的方法,其实就是js拉取php并传值,在php查询后输出,并通过js将返回的数据显示到页面,俗称ajax。我们往下看。

前端页面:

折叠XML/HTML 代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
  5. <title>测试 - Powered by EmpireCMS</title>  
  6. <meta name="keywords" content="" />  
  7. <meta name="description" content="" />  
  8. <style>  
  9. .dataItem{font-size:20px;color:red;}  
  10. </style>  
  11.    <script type="text/javascript">  
  12. var xmlhttp;  
  13. var pagenow=0;  
  14. function loadXMLDoc(url,cfunc)  
  15. {  
  16. if (window.XMLHttpRequest)  
  17.   {// code for IE7+, Firefox, Chrome, Opera, Safari  
  18.   xmlhttp=new XMLHttpRequest();  
  19.   }  
  20. else  
  21.   {// code for IE6, IE5  
  22.   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");  
  23.   }  
  24. xmlhttp.onreadystatechange=cfunc;  
  25. xmlhttp.open("GET",url,true);  
  26. xmlhttp.send();  
  27. }  
  28. function myFunction(url,id)  
  29. {  
  30.  pagenowpagenow=pagenow+1;  
  31.   urlurl2=url+pagenow;  
  32.     
  33. loadXMLDoc(url2,function()  
  34.   {  
  35.   if (xmlhttp.readyState==4 && xmlhttp.status==200)  
  36.     {  
  37.      var data = JSON.parse(xmlhttp.responseText);  
  38.                     for (var i = 0; i < data.length; i++) {  
  39.                         var item = data[i];  
  40.                         var div = document.createElement("div");  
  41.                         div.setAttribute("class", "dataItem");  
  42.                         // Inserts data into the html.  
  43.                         div.innerHTML = item.id + " " + item.title+"<br/>";  
  44.                         document.getElementById(id).appendChild(div);  
  45.                     }  
  46.     //document.getElementById(id).innerHTML=document.getElementById(id).innerHTML+xmlhttp.responseText;  
  47.     }  
  48.   });  
  49. }  
  50. </script>  
  51. </head>  
  52. <body onload="">  
  53.   <p>111111111111</p>  
  54.   <p>222222</p>  
  55.   <div id="getmore"></div>  
  56.    <p>33333333</p>  
  57.     <p>44444444444</p>  
  58.     
  59. <a  onclick="myFunction('e/extend/get.php?page=','getmore');">点击加载</a>  
  60.     
  61.   </body>  
  62. </html>  

我们可以看到最后的“点击加载”按钮,请求了get.php文件,下面是get.php文件代码:

折叠PHP 代码
  1. <?php  
  2. require('../class/connect.php');   
  3. require('../class/db_sql.php');   
  4. $link=db_connect();   
  5. $empire=new mysqlquery();   
  6. $start = $page*10;  
  7. $sql=$empire->query("select * from {$dbtbpre}ecms_download order by newstime desc limit $start,10");  
  8. while($r=$empire->fetch($sql)){  
  9. //echo $r['id'].$r['title'];  
  10. $sayList[] = array('id'=>$r['id'], 'title'=>$r['title']);  
  11. }  
  12. echo json_encode($sayList);  
  13. db_close();  
  14. $empire=null;   
  15. ?>  

这里要注意一点,如果涉及到编码的不同,需要使用iconv()函数来对字符转码,否则会显示为乱码。

标签:
文章标题:帝国cms使用JS+AJAX方式实现文章信息列表动态加载
文章网址:http://www.jzjsw.com/cmsJiaocheng/diguocms/11323.html
上一篇:帝国cms二次开发的基本方式剖析
下一篇:帝国cms模板制作 - ecmsinfo万能标签使用详解
来顶一下
返回首页
返回首页
相关文章
    无相关信息
推荐资讯
如何通过SEO优化排名赚钱?SEO赚钱方法
如何通过SEO优化排名赚
seo优化教程:网站seo内容优化
seo优化教程:网站seo
SEO细节:企业SEO如何快速为新站做出效果
SEO细节:企业SEO如何
电商技术将如何发展?2018年有这五个大胆预测
电商技术将如何发展?
最新文章
栏目更新
栏目热门