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

 这里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.     
  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文件代码：

  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()函数来对字符转码，否则会显示为乱码。

扫一扫手机访问