HTML:
<!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>无标题文档</title> <style> img{border:0;} </style> <script language="javascript" src="jquery-1.4.4.min.js" type="text/javascript"></script> <script language="javascript"> var PageNo = 1; var PageSize = 50; $(document).ready(function(){ $.get("ajax.php",function(data){ $("#mypage").html(data); }) }) iIntervalId = setInterval("test();",2000); function show(){ PageNo++; pageOffset = (PageNo-1)*PageSize+1; $.get("ajax.php?act=get_more&LimitStart="+pageOffset+"&PageNo="+PageNo+'&r='+Math.random(),function(data){ if('failure' != data){ $("#mypage").append(data); //$("#showmore").html('<a class="handle" href="javascript:show()">显示更多结果</a>'); } }) } //当前滚动条位置高度 function getScrollTop(){ var scrollTop=0; if(document.documentElement&&document.documentElement.scrollTop){ scrollTop=document.documentElement.scrollTop; } else if(document.body) { scrollTop=document.body.scrollTop; } return scrollTop; } //取窗口可视范围的高度 function getClientHeight(){ var clientHeight=0; if(document.body.clientHeight&&document.documentElement.clientHeight) { var clientHeight = (document.body.clientHeight<document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight; } else { var clientHeight = (document.body.clientHeight>document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight; } return clientHeight; } //显示状态加载图片 function showLoadingImg() { $('#showmore').html('<a class="handle" href="javascript:show()"><img src="loading.gif" height="32px" />显示更多结果</a>'); } //取得当前页面显示所占用的高度 function getScrollHeight() { return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight); } function test() { if (getScrollTop()+getClientHeight()==getScrollHeight()) { //此处还要做判断，判断数据是否已经加载完，若加载完就不在显示加载图片 $.get("ajax.php?act=GetPageTotal",function(data){ //var string = PageNo + '----' + data; //alert(string); if(PageNo >= data){ clearInterval(iIntervalId); $("#showmore").hide(); return; } }) showLoadingImg(); show(); } } </script> </head> <body> <div id="mypage"> </div> <div class="showmore" id="showmore"><a class="handle" href="javasrcipt:show();">显示更多结果</a></div> </body> </html>
PHP:
<?php $conn = mysql_connect('localhost','root','123456'); mysql_select_db('sx'); mysql_query("SET NAMES UTF8"); $act = empty($_GET['act']) ? '' : $_GET['act']; if('GetPageTotal' == $act){ $sql = "SELECT COUNT(*) AS c FROM `shuxiang_archives`"; $result =mysql_query($sql); $row = mysql_fetch_array($result); $Total = $row['c']; $PageSize = 50; echo $PageTotal = ceil($Total/$PageSize); } if ('' == $act) { $sql = "SELECT id,title FROM `shuxiang_archives` ORDER BY id DESC LIMIT 0,50"; $result = mysql_query($sql); $arrAll = array(); while ($arr = mysql_fetch_object($result)) { echo '<p>'.$arr->id.'---'.$arr->title.'</p>'; } } if ('get_more' == $act) { $sql = "SELECT COUNT(*) AS c FROM `shuxiang_archives`"; $result =mysql_query($sql); $row = mysql_fetch_array($result); $Total = $row['c']; $PageSize = 50; $PageTotal = ceil($Total/$PageSize); $LimitStart = (int)$_GET['LimitStart']; $PageNo = (int)$_GET['PageNo']; if ($PageNo <= $PageTotal) { $sql = "SELECT id,title FROM `shuxiang_archives` ORDER BY id DESC LIMIT $LimitStart,50"; $result = mysql_query($sql); $arrAll = array(); while ($arr = mysql_fetch_object($result)) { echo '<p>'.$arr->id.'---'.$arr->title.'</p>'; } }else { echo 'failure'; } }