首页>>Jquery文字>>无刷新动态加载数据,滚动条加载(2013-10-03)

无刷新动态加载数据,滚动条加载

 滚屏加载更多数据,适合评论等页面

本例的数据库很简单,一看就明了

无刷新动态加载数据,滚动条加载

 

PHP Code
  1.  <div id="container">   
  2.   
  3.     <?php   
  4.     $query=mysql_query("select * from content order by id desc limit 0,10");   
  5.     while ($row=mysql_fetch_array($query)) {   
  6.     ?>   
  7.     <div class="single_item">   
  8.         <div class="element_head">   
  9.               <div class="date"><?php echo date('m-d H:i',strtotime($row['updatetime']));?></div>   
  10.               <div class="author"><?php echo $row['id'];?></div>   
  11.          </div>   
  12.          <div class="content"><?php echo $row['message'];?></div>   
  13.     </div>   
  14.     <?php } ?>   
  15.  </div>    
  16. <div class="nodata"></div>   
js文件
 
JavaScript Code
  1. <script type="text/javascript">  
  2. $(function(){  
  3.     var winH = $(window).height(); //页面可视区域高度  
  4.     var i = 1;  
  5.     $(window).scroll(function () {  
  6.         var pageH = $(document.body).height();  
  7.         var scrollT = $(window).scrollTop(); //滚动条top  
  8.         var aa = (pageH-winH-scrollT)/winH;  
  9.         if(aa<0.02){  
  10.             $.getJSON("result.php",{page:i},function(json){  
  11.                 if(json){  
  12.                     var str = "";  
  13.                     $.each(json,function(index,array){  
  14.                         var str = "<div class="single_item"><div class="element_head">";  
  15.                         var str = str + "<div class="date">"+array['date']+"</div>";  
  16.                         var str = str + "<div class="author">"+array['author']+"</div>";  
  17.                         var str = str + "</div><div class="content">"+array['content']+"</div></div>";  
  18.                         $("#container").append(str);  
  19.                     });  
  20.                     i++;  
  21.                 }else{  
  22.                     $(".nodata").show().html("别滚动了,已经到底了。。。");  
  23.                     return false;  
  24.                 }  
  25.             });  
  26.         }  
  27.     });  
  28. });  
  29. </script>  

result.php

PHP Code
  1. <?php  
  2. include("conn.php");  
  3.   
  4. $page = intval($_GET['page']);  //获取请求的页数   
  5. $start = $page*5;   
  6. $query=mysql_query("select * from content order by id desc limit $start,5");   
  7. while ($row=mysql_fetch_array($query)) {   
  8.     $arr[] = array(   
  9.         'content'=>$row['message'],   
  10.         'author'=>$row['id'],   
  11.         'date'=>date('m-d H:i',strtotime($row['updatetime']))   
  12.     );   
  13. }   
  14. echo json_encode($arr);  //转换为json数据输出   
  15. ?>  

原文地址:http://www.freejs.net/article_jquerywenzi_52.html