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


		无刷新动态加载数据，滚动条加载
 滚屏加载更多数据,适合评论等页面
本例的数据库很简单，一看就明了
 
演示
 
 
PHP Code
 <div id="container">   
  
    <?php   
    $query=mysql_query("select * from content order by id desc limit 0,10");   
    while ($row=mysql_fetch_array($query)) {   
    ?>   
    <div class="single_item">   
        <div class="element_head">   
              <div class="date"><?php echo date('m-d H:i',strtotime($row['updatetime']));?></div>   
              <div class="author"><?php echo $row['id'];?></div>   
         </div>   
         <div class="content"><?php echo $row['message'];?></div>   
    </div>   
    <?php } ?>   
 </div>    
<div class="nodata"></div>   
js文件
 
JavaScript Code
<script type="text/javascript">  
$(function(){  
    var winH = $(window).height(); //页面可视区域高度  
    var i = 1;  
    $(window).scroll(function () {  
        var pageH = $(document.body).height();  
        var scrollT = $(window).scrollTop(); //滚动条top  
        var aa = (pageH-winH-scrollT)/winH;  
        if(aa<0.02){  
            $.getJSON("result.php",{page:i},function(json){  
                if(json){  
                    var str = "";  
                    $.each(json,function(index,array){  
                        var str = "<div class=\"single_item\"><div class=\"element_head\">";  
                        var str = str + "<div class=\"date\">"+array['date']+"</div>";  
                        var str = str + "<div class=\"author\">"+array['author']+"</div>";  
                        var str = str + "</div><div class=\"content\">"+array['content']+"</div></div>";  
                        $("#container").append(str);  
                    });  
                    i++;  
                }else{  
                    $(".nodata").show().html("别滚动了，已经到底了。。。");  
                    return false;  
                }  
            });  
        }  
    });  
});  
</script>  
result.php
PHP Code
<?php  
include("conn.php");  
  
$page = intval($_GET['page']);  //获取请求的页数   
$start = $page*5;   
$query=mysql_query("select * from content order by id desc limit $start,5");   
while ($row=mysql_fetch_array($query)) {   
    $arr[] = array(   
        'content'=>$row['message'],   
        'author'=>$row['id'],   
        'date'=>date('m-d H:i',strtotime($row['updatetime']))   
    );   
}   
echo json_encode($arr);  //转换为json数据输出   
?>

补充：综合编程 , 其他综合 ,