php+ajax实现拖动滚动条分批加载请求加载数据

Posted dawn888

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了php+ajax实现拖动滚动条分批加载请求加载数据相关的知识，希望对你有一定的参考价值。

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‘;
    }
}

 

以上是关于php+ajax实现拖动滚动条分批加载请求加载数据的主要内容，如果未能解决你的问题，请参考以下文章

下拉加载更多内容（滚动加载）

ajax加php实现动态加载数据（前后端不分离）

jquery\ajax\asp.滚动条到底部加载后面的10条数据,一直加载到没有符合条件的数据.

使用 PHP 在页面向下滚动时加载 Ajax 数据

实现图片滚动加载以及排版优化

ajax滚动条懒加载