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应用程 ...
随机推荐
- angualrjs 总结 随记(二)
表单控制变量form 控制变量 //字段是否未更改 fromName.inputFieldName.$pristine //字段是否更改 fromName.inputFieldName.$dirty ...
- CentOS 7.3下安装MySql
1.下载mysql源安装包 wget http://dev.mysql.com/get/mysql57-community-release-el7-8.noarch.rpm 2.安装mysql源 ...
- 进制-Adding Two Negabinary Numbers
2020-02-20 14:52:41 问题描述: 问题求解: 最开始的想法是将两个数字先转化成自然数在求和,最后转化回去,但是实际上这种方案是不可取的,主要的问题就是会爆掉. 那么就得按位进行运算了 ...
- 如何使用 electron 屏幕或摄像头录制并保存到本地
思路分析 通过 electron desktopCapturer 和 navigator 获取要进行录制的媒体源信息: 使用 MediaRecorder 对视频流进行录制: 将 MediaRecord ...
- ML Lecture 0-2: Why we need to learn machine learning?
在Github上也po了这个系列学习笔记(MachineLearningCourseNote),觉得写的不错的小伙伴欢迎来给项目点个赞哦~~ ML Lecture 0-2: Why we need t ...
- vue+express+mongodb 实现 增删改查
一.创建一个vue项目 用脚手架vue-cli搭建一个项目,数据请求用axios方式,写几个按钮用来调接口(vue这块不做多解释,不懂的可以先去官网学习vue-cli:https://cli.vuej ...
- MATLAB 大数相乘溢出显示
解一道面试题——华为社招现场面试1:请使用代码计算1234567891011121314151617181920*2019181716151413121110987654321 . 乘积是逐位相乘,也 ...
- mybatis诡异的bug
在使用mybatis中使用 foreach 时,出现了一个诡异的bug java文件中是 List<ImportTaskInfoEntity> selectByCalcBatchIds(@ ...
- SpringBoot 使用 JSR303 自定义校验注解
JSR303 是 Java EE 6 中的一项子规范,叫做 Bean Validation,官方参考实现是hibernate Validator,有了它,我们可以在实体类的字段上标注不同的注解实现对数 ...
- codeforces 1038a（找最长的前k个字母出现相同次数的字符串）
codeforces 1038a You are given a string s of length n, which consists only of the first k letters of ...