欢迎光临
我们每日更新

帝国cms如何实现文章信息列表动态加载

许多站长在制作移动端网站时,经常需要动态加载文章信息列表,以便更好的适应手机端访问。这里站长技术网和大家分享一种动态加载的方法,其实就是js拉取php并传值,在php查询后输出,并通过js将返回的数据显示到页面,俗称ajax。我们往下看。

前端页面:

  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. loadXMLDoc(url2,function()
  33.   {
  34.   if (xmlhttp.readyState==4 && xmlhttp.status==200)
  35.     {
  36.      var data = JSON.parse(xmlhttp.responseText);
  37.                     for (var i = 0; i < data.length; i++) {
  38.                         var item = data[i];
  39.                         var div = document.createElement(“div”);
  40.                         div.setAttribute(“class”, “dataItem”);
  41.                         // Inserts data into the html.
  42.                         div.innerHTML = item.id + ” ” + item.title+”<br/>“;
  43.                         document.getElementById(id).appendChild(div);
  44.                     }
  45.     //document.getElementById(id).innerHTML=document.getElementById(id).innerHTML+xmlhttp.responseText;
  46.     }
  47.   });
  48. }
  49. </script>
  50. </head>
  51. <body onload=“”>
  52.   <p>111111111111</p>
  53.   <p>222222</p>
  54.   <div id=“getmore”></div>
  55.    <p>33333333</p>
  56.     <p>44444444444</p>
  57. <a  onclick=“myFunction(‘e/extend/get.php?page=’,’getmore’);”>点击加载</a>
  58.   </body>
  59. </html>

我们可以看到最后的“点击加载”按钮,请求了get.php文件,下面是get.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()函数来对字符转码,否则会显示为乱码。

赞(0)
未经允许不得转载:站长技术网 » 帝国cms如何实现文章信息列表动态加载
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址