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应用程 ...
随机推荐
- java获取不同时段
当前时间: long currentime= System.currentTimeMillis(); 本周第一天0时: Long weekstart = current.withDayOfWeek(1 ...
- 关于js中iframe 中 location.href的用法
关于js中"window.location.href"."location.href"."parent.location.href".&qu ...
- JSOI 2016 病毒感染 辅助Dp问题
原题链接:https://www.luogu.com.cn/problem/P5774 分析 直接看这道题,第一个困惑点,那个绝对值的比较是什么东西,根据数学知识,我们可以知道这个意思是k到i的距离小 ...
- 搜索引擎如何检索结果：Python和spaCy信息提取简介
概览 像Google这样的搜索引擎如何理解我们的查询并提供相关结果? 了解信息提取的概念 我们将使用流行的spaCy库在Python中进行信息提取 介绍 作为一个数据科学家,在日常工作中,我严重依赖搜 ...
- HDU 4497 GCD and LCM 素因子分解+ gcd 和 lcm
题意: 给两个数,lll 和 ggg,为x , y , z,的最小公倍数和最大公约数,求出x , y , z 的值有多少种可能性 思路: 将x , y , z进行素因子分解 素因子的幂次 x a1 a ...
- Fiddler抓取数据包分析案例
案例:利用Fiddler抓取苏宁易购网站数据包分析 抓包软件:Fiddler4 请求名字:www.suning.com 详细内容: 一.了解数据包区域的字段含义 图1数据包区域 #:顺序号,按照抓包的 ...
- 【Pytest01】全网最全最新的Pytest框架快速入门
一.Pytest简介pytest是一个非常成熟的全功能的Python测试框架,主要有一下几个特点:1.简单灵活,容易上手,支持参数化2.能够支持简单的单元测试和复杂的功能测试,还可以用来做seleni ...
- Dubbo与Spring Cloud的比较
区别: ----- 来源(背景): Dubbo,是阿里巴巴服务化治理的核心框架,并被广泛应用于阿里巴巴集团的各成员站点. Spring Cloud,从命名我们就可以知道,它是Spring Source ...
- 《java编程思想》操作符
1. 自动递增和递减 递增和递减运算是两种相当不错的快捷运算,递减操作符是 "--",意为减少一个单位,递增操作符是 "++",意为增加一个单位.这两个操作符各 ...
- Sql练习201908131742
orderdt_jimmy表结构: sql查询: then amount end) t1, then amount end) t2, then amount end) t3 from orderdt_ ...