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应用程 ...
随机推荐
- 【WebGL】WebGL API 详解
基于 WebGL Specifications 最全面的API释疑. 类型以及对象定义 这部分内容主要定义一部分类型和数据结构. typedef unsigned long GLenum; typed ...
- Java分布式IP限流和防止恶意IP攻击方案
前言 限流是分布式系统设计中经常提到的概念,在某些要求不严格的场景下,使用Guava RateLimiter就可以满足.但是Guava RateLimiter只能应用于单进程,多进程间协同控制便无能为 ...
- MATLAB GUI 预约程序
因为一起奇怪的原因,要做一个预约程序.初衷是能够完成注册.登陆.预约.查看个人信息等. 原本想用Java写的,又由于一些特殊原因耽搁了,导致最后只有一个晚上的时间,匆匆忙忙到最后就用MATLAB GU ...
- 【狂神说】JAVA Mybatis 笔记+源码
简介 自学的[狂神JAVA]MyBatis GitHub源码: https://github.com/Donkequan/Mybatis-Study 分享自写源码和笔记 配置用的 jdk13.0.2 ...
- sql-lib闯关41-50
第四十一关 这关和第三十九关一样,只是错误没有回显 获得版本和数据库名 ?id=0 union select 1,version(),database() %23 获得表名 ?id=0 un ...
- 强化学习之五：基于模型的强化学习（Model-based RL）
本文是对Arthur Juliani在Medium平台发布的强化学习系列教程的个人中文翻译,该翻译是基于个人分享知识的目的进行的,欢迎交流!(This article is my personal t ...
- postgre安装和使用（R&Python)
安装postgre http://helianthus-code.lofter.com/post/1dfe03e0_1c68233aa 这里选C更好 这里口令密码输入就是黑的 我装的时候反复报错,查了 ...
- Day20-tomcat
tomcat 一.Java及tomcat简介 二.安装JDK及tomcat 1.安装jdk 安装jdk很简单,首先下载网上的jdk安装包,我这边下载的是jdk-8u221-linux-x64.tar. ...
- Luogu 1008 三连击
题目背景 本题为提交答案题,您可以写程序或手算在本机上算出答案后,直接提交答案文本,也可提交答案生成程序. 题目描述 将1,2, \cdots ,91,2,⋯,9共99个数分成33组,分别组成33个三 ...
- # H - H HDU - 2066 （多起点、多终点问题）
H - H HDU - 2066 (多源点.多汇点问题) 一个图上,有M条边,Z个出发点,Y个终止点.求一条最短路,其中起点是Z中的任意一点,终点是Y中任意一点. Input 输入数据有多组,输入直到 ...