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

jQuery表单 Ajax向PHP服务端发送文件请求并返回数据
ImageAjaxUpLoad.htm <!DOCTYPE html> <head> <meta charset='utf-8'> <title>< ...
jQuery.ajax( options ) : 通过 HTTP 请求加载远程数据
jQuery.ajax( options ) : 通过 HTTP 请求加载远程数据这个是jQuery 的底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等. $.ajax() ...
页面ajax自带的访问后台时,正在加载中
ajax自带访问后台时,提示正在加载中,加载完成后自动消除遮罩层,代码如下: var mask=mui.createMask();//遮罩层 //传统ajax的post请求方式 mui.ajax('h ...
Jquery.ajax 详细解释通过Http请求加载远程数据
首先请看一个Jquery.ajax的例子 $.ajax({ type: "GET", url: "/api/SearchApi/GetResults", dat ...
KnockoutJS 3.X API 第七章其他技术(1) 加载和保存JSON数据
Knockout允许您实现复杂的客户端交互性,但几乎所有Web应用程序还需要与服务器交换数据,或至少将本地存储的数据序列化. 最方便的交换或存储数据的方式是JSON格式 - 大多数Ajax应用程序今天 ...
6.Knockout.Js（加载或保存JSON数据）
前言 Knockout可以实现很复杂的客户端交互,但是几乎所有的web应用程序都要和服务器端交换数据(至少为了本地存储需要序列化数据),交换数据最方便的就是使用JSON格式 – 大多数的Ajax应用程 ...
Knockout应用开发指南第六章：加载或保存JSON数据
原文:Knockout应用开发指南第六章:加载或保存JSON数据加载或保存JSON数据 Knockout可以实现很复杂的客户端交互,但是几乎所有的web应用程序都要和服务器端交换数据(至少为了本地 ...
《前端之路》之前端图片类型 & 优化 & 预加载 & 懒加载 & 骨架屏
目录 09: 前端图片类型 & 优化 & 预加载 & 懒加载 & 骨架屏 09: 前端图片类型 & 优化 & 预加载 & 懒加载 & ...
Knockout.Js官网学习（加载或保存JSON数据）
前言 Knockout可以实现很复杂的客户端交互,但是几乎所有的web应用程序都要和服务器端交换数据(至少为了本地存储需要序列化数据),交换数据最方便的就是使用JSON格式 – 大多数的Ajax应用程 ...

随机推荐

【转】深入 ProtoBuf - 简介
之前在网络通信和通用数据交换等应用场景中经常使用的技术是 JSON 或 XML,而在最近的开发中接触到了 Google 的 ProtoBuf. 在查阅相关资料学习 ProtoBuf 以及研读其源码之后 ...
还是只使用console.log()进行调试？好吧，其实还有更多。
在浏览器控制台中打印消息无疑可以拯救所有开发人员. console.log()消息就像您的大多数疾病的药,同时调试了代码中的一些有线问题. 那里的大多数开发人员都喜欢— 让我们在浏览器中打印消息以了解 ...
.gitignore排除（不忽略）二级以上目录下的文件或目录
在.gitignore中,结合使用/*和!filename的语法,可以达到除特定文件或目录外全部忽略的目的.但当希望不忽略的文件或目录在二级或多级目录下时,如果这样写 /* !/sub/subsub/ ...
Contest 154
2019-09-16 17:22:28 总体感受:这次比赛的模版题也太多了吧,两条模版题没有想出来.总的来说,还是自己的刷题量还是严重的不够. 注意点: 1)提升刷题量和覆盖率非常重要: 2)在碰到大 ...
Hive分析窗口函数
数据准备 CREATE EXTERNAL TABLE lxw1234 ( cookieid string, createtime string, --day pv INT ) ROW FORMAT D ...
Hive常用命令及作用
1-创建表 -- 内部表 create table aa(col1 string,col2 int) partitioned by(statdate int) ROW FORMAT DELIMITED ...
SQL实战（四）
一. 题目描述将employees表的所有员工的last_name和first_name拼接起来作为Name,中间以一个空格区分CREATE TABLE `employees` ( `emp_no` ...
while与until
一.格式: while 条件测试 :do 循环体 done 二.条件测试条件测试是指满足条件则会一直执行下去. 比如: let i =0 while i < 100;do echo $i i ...
Django-CBV&FBV
django中请求处理方式有2种:FBV 和 CBV 一.FBV FBV(function base views) 就是在视图里使用函数处理请求. urls.py from django.conf.u ...
Celery动态添加定时任务
背景业务需求:用户可创建多个多人任务,需要在任务截止时间前一天提醒所有参与者技术选型: Celery:分布式任务队列.实现异步与定时 django-celery-beat:实现动态添加定时任务,即 ...

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

php+ajax实现拖动滚动条分批加载请求加载数据的更多相关文章

随机推荐

热门专题