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. 【简说Python WEB】pyechart在flask中的应用

    个人笔记总结,可读性不高.只为自己总结用.怕日后忘记. 这里用到了tushare,pandas等python组件. pyechart的案例 c = ( Bar() .add_xaxis([" ...

  2. Dapper操作MySQL数据库获取JSON数据中文乱码

    前言 在项目中利用Dapper将JSON数据存储到MySQL数据库,结果发现JSON数据中的中文乱码,特此记录,希望对存储JSON的童鞋能有所帮助,文中若有错误之处,还望批评指正. Dapper获取J ...

  3. MS15-034漏洞复现、HTTP.SYS远程代码执行漏洞

    #每次命令都百度去找命令,直接弄到博客方便些: 漏洞描述: 在2015年4月安全补丁日,微软发布的众多安全更新中,修复了HTTP.sys中一处允许远程执行代码漏洞,编号为:CVE-2015-1635( ...

  4. VUE axios请求 封装 get post Http

    创建httpService.js 文件 import axios from 'axios'; import { Loading , Message } from 'element-ui'; impor ...

  5. Happens-before先行发生原则

    简介 从JDK1.5,java使用新的JSR-133内存模型:JSR-133使用happens-before的概念来阐述操作之间的内存可见性:在JMM中,如果一个操作执行的结果需要对另一个操作可见,那 ...

  6. 使用scrapy-selenium, chrome-headless抓取动态网页

        在使用scrapy抓取网页时, 如果遇到使用js动态渲染的页面, 将无法提取到在浏览器中看到的内容. 针对这个问题scrapy官方给出的方案是scrapy-selenium, 这是一个把sel ...

  7. 技术大佬：我去，你竟然还在用 try–catch-finally

    二哥,你之前那篇 我去 switch的文章也特么太有趣了,读完后意犹未尽啊,要不要再写一篇啊?虽然用的是 Java 13 的语法,对旧版本不太友好.但谁能保证 Java 不会再来一次重大更新呢,就像 ...

  8. coding++: java把一个整数拆分为单个值

    方式一: int num = 100; int[] ary = new int[(num+"").length()]; for(int i = ary.length-1;i> ...

  9. 蓝桥杯 K好数（Java）

    越来越觉得自己菜,一道简单的动态规划写不出来,题解也是看了很多份才看懂了,所以尽量以图表的方式写了题解,希望我的题解能帮到其他人吧.(;´Д`) 首先是题目: 输入描述: 输入包含两个正整数,K和L. ...

  10. 三、【Docker笔记】Docker镜像

    镜像是Docker的三大核心概念之一.Docker在运行容器之前,本地需要存有镜像,若不存在则Docker会首先尝试从默认的镜像仓库中去下载,当然我们也可以去配置自己的仓库,如此就会从我们配置的仓库中 ...