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. Linux软件安装之JDK的安装

    JDK的安装 1.1. 下载JDK,此处版本是1.8u131,实际操作以自己具体版本为准 先查看Linux系统是多少位(32位/64位):getconf LONG_BIT 然后去官网下载JDK [jd ...

  2. 手机抓包HTTPS (Fiddler & Packet Capture)

    手机抓包HTTPS (Fiddler & Packet Capture) 以前写了一个小游戏(消灭病毒)的刷金币小脚本,使用需要获取openid ,就需要抓微信的HTTPS包 一直都是用Fid ...

  3. 二进制补码：Why & How

    二进制补码:Why & How 学习计算机原理或者语言的底层操作难免会遇到用二进制补码表示负数的问题.由于一些书本上对于采用补码的原因没有详细解释,很多人会认为这只是一种规定,但实际上采用补码 ...

  4. 第九周Java实验作业

    实验九 异常.断言与日志 实验时间 2018-10-25 1.实验目的与要求 (1) 掌握java异常处理技术: Java的异常处理机制可以控制程序从错误产生的位置转移到能够进行错误处理的位置. Ja ...

  5. Chrome80调整SameSite策略对IdentityServer4的影响以及处理方案（翻译）

    首先,好消息是Goole将于2020年2月份发布Chrome 80版本.本次发布将推进Google的"渐进改良Cookie"策略,打造一个更为安全和保障用户隐私的网络环境. 坏消息 ...

  6. HDU-6376 度度熊剪纸条

    链接 http://acm.hdu.edu.cn/showproblem.php?pid=6376 分析 这道题好像不是很难,因为是要拼出前缀1,所以确定剪下每一段1需要的刀数,然后因为有次数限制,所 ...

  7. coding++：MySQL-ERROR：Column 'complaint_settlement_id' in field list is ambiguous

    (多表查询出现的问题)列'ID'在字段列表中重复,其实就是两张表有相同的字段,但是使用时表字段的名称前没有加表名,导致指代不明. 如 前面加上表名前缀就没问题了.

  8. coding++ ：Layui-监听事件

    在使用layui的form表单做验证提交的时候,如果结合vue,或者是三级联动的时候,就需要做事件监听了. 具体语法: form.on('event(过滤器值)', callback); 可以用于监听 ...

  9. VMware pro 15.5安装教程

    一,安装 1.VMware pro 15.5 下载地址:https://www.vmware.com/cn/products/workstation-pro/workstation-pro-evalu ...

  10. MySQL默认隔离级别为什么是RR

    曾多次听到“MySQL为什么选择RR为默认隔离级别”的问题,其实这是个历史遗留问题,当前以及解决,但是MySQL的各个版本沿用了原有习惯.历史版本中的问题是什么,本次就通过简单的测试来说明一下. 1. ...