无刷新动态加载数据，滚动条加载 - 综合篇 - 家腾网

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

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>

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  
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数据输出   
?>

《无刷新动态加载数据，滚动条加载》上暂无评论!

发布您对《无刷新动态加载数据，滚动条加载》的评论吧！