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应用程 ...
随机推荐
- Spinner 用法
</Spinner> <TextView android:layout_width="wrap_content" android:layout_height=&q ...
- 贵州省网络安全知识竞赛团体赛Writeup-phpweb部分
0x01 混淆后门#conn.php 首先还是拖到D盾扫描 打开conn.php发现底部有那么一串代码: 对这个代码进行分析 首先可以对几个比较简单的变量输出看一下 $s输出内容为create_fun ...
- Cisco二层交换机命令
1.二层交换机基本配置 Switch >Switch >enable # 进入特权模式 Switch#configure terminal # 进入全局配置模式 Switch(co ...
- C语言实现strcat / strlen / strcmp / strcpy
主要考虑两点: 返回值对使用的便利性. 边界,null的判断. strcat char *m_strcat(char *des, const char *src) { assert((des != N ...
- PTA 创建计算机类
6-5创建计算机 (10分) 定义一个简单的Computer类,有数据成员芯片(cpu).内存(ram).光驱(cdrom)等等,有两个公有成员函数run.stop.cpu为CPU类的一个对象,ram ...
- 【2019多校第一场补题 / HDU6582】2019多校第一场E题1005Path——最短路径+网络流
HDU6582链接 题意 在一张有向图中,有一个起点和一个终点,你需要删去部分路径,使得起点到终点的最短距离增加(并不要求需要使得距离变成最大值),且删除的路径长度最短.求删去的路径总长为多少 分析 ...
- OpenCV-Python 傅里叶变换 | 三十
目标 在本节中,我们将学习 使用OpenCV查找图像的傅立叶变换 利用Numpy中可用的FFT函数 傅立叶变换的某些应用程序 我们将看到以下函数:cv.dft(),cv.idft()等 理论 傅立叶变 ...
- ADO.NET 的使用（二）
一.本篇主要讲ADO.NET的核心DataSet DataSet里面有个DataTable,DataTable还有个对应的DataView 首先呢,假设数据库的数据 id name mob 100 张 ...
- 字典树模板 HDU - 1251
题意: 给一些单词,换行键后,查找以后输入的单词作为前缀的话们在之前出现过几次. 思路: 字典树模板----像查字典的顺序一样 #include<string> #include<s ...
- 让vscode支持WePY框架 *.wpy
WePY框架的.wpy 文件在微信开发者工具中无法打开,这里使用vscode 打开,并安装vetur 和vetur-wepy 插件即可