本站推荐

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

来 源:CMS大学 作 者:网络 时间:2016-06-02 点击:
loading...
这里cms大学和大家分享一种动态加载的方法,其实就是js拉取php并传值,在php查询后输出,并通过js将返回的数据显示到页面,俗称ajax。我们往下看。

前端页面:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>测试 - Powered by EmpireCMS</title> 
<meta name="keywords" content="" /> 
<meta name="description" content="" /> 
<style> 
.dataItem{font-size:20px;color:red;} 
</style> 
   <script type="text/javascript"> 
var xmlhttp; 
var pagenow=0; 
function loadXMLDoc(url,cfunc) 
{ 
if (window.XMLHttpRequest) 
  {// code for IE7+, Firefox, Chrome, Opera, Safari 
  xmlhttp=new XMLHttpRequest(); 
  } 
else 
  {// code for IE6, IE5 
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
  } 
xmlhttp.onreadystatechange=cfunc; 
xmlhttp.open("GET",url,true); 
xmlhttp.send(); 
} 
function myFunction(url,id) 
{ 
pagenowpagenow=pagenow+1; 
  urlurl2=url+pagenow; 
   
loadXMLDoc(url2,function() 
  { 
  if (xmlhttp.readyState==4 && xmlhttp.status==200) 
    { 
     var data = JSON.parse(xmlhttp.responseText); 
                    for (var i = 0; i < data.length; i++) { 
                        var item = data[i]; 
                        var div = document.createElement("div"); 
                        div.setAttribute("class", "dataItem"); 
                        // Inserts data into the html. 
                        div.innerHTML = item.id + " " + item.title+"<br/>"; 
                        document.getElementById(id).appendChild(div); 
                    } 
    //document.getElementById(id).innerHTML=document.getElementById(id).innerHTML+xmlhttp.responseText; 
    } 
  }); 
} 
</script> 
</head> 
<body onload=""> 
  <p>111111111111</p> 
  <p>222222</p> 
  <div id="getmore"></div> 
   <p>33333333</p> 
    <p>44444444444</p> 
   
<a  onclick="myFunction('e/extend/get.php?page=','getmore');">点击加载</a> 
   
  </body> 
</html> 

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

<?php 
require('../class/connect.php');  
require('../class/db_sql.php');  
$link=db_connect();  
$empire=new mysqlquery();  
$start = $page*10; 
$sql=$empire->query("select * from {$dbtbpre}ecms_download order by newstime desc limit $start,10"); 
while($r=$empire->fetch($sql)){ 
//echo $r['id'].$r['title']; 
$sayList[] = array('id'=>$r['id'], 'title'=>$r['title']); 
} 
echo json_encode($sayList); 
db_close(); 
$empire=null;  
?> 

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

来源:http://www.2ky.cn/h/diguocms/7644.htm
转载要求注明来源,请尊重作者版权!

关键字: 帝国cms Ajax 动态加载

会员登陆close X