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实现拖动滚动条分批加载请求加载数据的更多相关文章

  1. jQuery表单 Ajax向PHP服务端发送文件请求并返回数据

    ImageAjaxUpLoad.htm <!DOCTYPE html> <head> <meta charset='utf-8'> <title>< ...

  2. jQuery.ajax( options ) : 通过 HTTP 请求加载远程数据

    jQuery.ajax( options ) : 通过 HTTP 请求加载远程数据 这个是jQuery 的底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等. $.ajax() ...

  3. 页面ajax自带的访问后台时,正在加载中

    ajax自带访问后台时,提示正在加载中,加载完成后自动消除遮罩层,代码如下: var mask=mui.createMask();//遮罩层 //传统ajax的post请求方式 mui.ajax('h ...

  4. Jquery.ajax 详细解释 通过Http请求加载远程数据

    首先请看一个Jquery.ajax的例子 $.ajax({ type: "GET", url: "/api/SearchApi/GetResults", dat ...

  5. KnockoutJS 3.X API 第七章 其他技术(1) 加载和保存JSON数据

    Knockout允许您实现复杂的客户端交互性,但几乎所有Web应用程序还需要与服务器交换数据,或至少将本地存储的数据序列化. 最方便的交换或存储数据的方式是JSON格式 - 大多数Ajax应用程序今天 ...

  6. 6.Knockout.Js（加载或保存JSON数据）

    前言 Knockout可以实现很复杂的客户端交互,但是几乎所有的web应用程序都要和服务器端交换数据(至少为了本地存储需要序列化数据),交换数据最方便的就是使用JSON格式 – 大多数的Ajax应用程 ...

  7. Knockout应用开发指南 第六章：加载或保存JSON数据

    原文:Knockout应用开发指南 第六章:加载或保存JSON数据 加载或保存JSON数据 Knockout可以实现很复杂的客户端交互,但是几乎所有的web应用程序都要和服务器端交换数据(至少为了本地 ...

  8. 《前端之路》之 前端图片 类型 & 优化 & 预加载 & 懒加载 & 骨架屏

    目录 09: 前端图片 类型 & 优化 & 预加载 & 懒加载 & 骨架屏 09: 前端图片 类型 & 优化 & 预加载 & 懒加载 & ...

  9. Knockout.Js官网学习（加载或保存JSON数据）

    前言 Knockout可以实现很复杂的客户端交互,但是几乎所有的web应用程序都要和服务器端交换数据(至少为了本地存储需要序列化数据),交换数据最方便的就是使用JSON格式 – 大多数的Ajax应用程 ...

随机推荐

  1. babel-loader配置

    1.npm i @babel/core.@babel/preset-env.@babel/runtime.@babel/plugin-transform-runtime.@babel/plugin-p ...

  2. [dfs] 2019牛客暑期多校训练营（第十场） Coffee Chicken

    题目地址: https://ac.nowcoder.com/acm/contest/890/B   时间限制:C/C++ 1秒,其他语言2秒空间限制:C/C++ 524288K,其他语言1048576 ...

  3. 2019牛客多校第四场 A meeting

    链接:https://ac.nowcoder.com/acm/contest/884/A来源:牛客网 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 524288K,其他语言10485 ...

  4. windows常用系统命令

    dir指定要列出的驱动器.目录和/或文件 显示当前路径下的所有文件的绝对路径,包含子文件夹中的内容 dir /b / s /o:n /a:a /b 表示去除摘要信息,且顶格显示完整路径 /s 表示枚举 ...

  5. OpenCV-Python SIFT尺度不变特征变换 | 三十九

    目标 在这一章当中, 我们将学习SIFT算法的概念 我们将学习找到SIFT关键点和描述算符. 理论 在前两章中,我们看到了一些像Harris这样的拐角检测器.它们是旋转不变的,这意味着即使图像旋转了, ...

  6. 一个完整的机器学习项目在Python中的演练（一）

    大家往往会选择一本数据科学相关书籍或者完成一门在线课程来学习和掌握机器学习.但是,实际情况往往是,学完之后反而并不清楚这些技术怎样才能被用在实际的项目流程中.就像你的脑海中已经有了一块块"拼 ...

  7. Springboot + Freemarker（一）

    Maven pom文件配置 <parent> <groupId>org.springframework.boot</groupId> <artifactId& ...

  8. 初识js（第一篇）

    初识javascript js是前端中作交互控制的语言,有了它,我们的前端页面才能"活"起来.学好这么语言显得非常重要,但是存在一定难度,所以一定要认真学习,充满耐心. js书写规 ...

  9. TensorFlow报错module 'tensorflow' has no attribute 'xxx'解决办法

    原因:TensorFlow2.0版本修改了许多函数名字 tf.sub()更改为tf.subtract() tf.mul()更改为tf.multiply() tf.types.float32更改为tf. ...

  10. 使用Dism命令对Win7镜像进行操作

    在操作前,我们需要下载Win7部署工具AIK和Win7原版镜像 ★镜像迅雷链接 ed2k://|file|cn_windows_7_ultimate_with_sp1_x64_dvd_u_677408 ...