内容简介：一个网站的数据非常多的时候，需要分页，方便浏览，为了方便翻页，那么我们摒弃传统的点击翻页，直接往下拉，不停地自动加载数据，这样就可以方便阅读。通过ajax向后端接口发起翻页请求，发送页码，后端接收页码，返回json数据，前端jquery解析json并且拼接在原有的数据基础上！index.html
设计目的
一个网站的数据非常多的时候，需要分页，方便浏览，为了方便翻页，那么我们摒弃传统的点击翻页，直接往下拉，不停地自动加载数据，这样就可以方便阅读。
设计原理
通过ajax向后端接口发起翻页请求，发送页码，后端接收页码，返回json数据，前端jquery解析json并且拼接在原有的数据基础上！
代码
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<title>jquery+ajax上拉加载更多</title>
<style>
*{margin:0;padding: 0;}
#text p{
width: 80%;
padding: 5px 5px;
background: #eee;
margin:5px auto;
}
#loadmore{
width: 120px;
background: #eee;
height: 45px;
border-radius: 100px;
margin:20px auto;
line-height: 45px;
text-align: center;
cursor: pointer;
}
#loading{
text-align: center;
}
</style>
</head>
<body>
<h3 id="loading"></h3>
<div id="text"></div>
<div id="loadmore">点击加载更多</div>
</body>
</html>
<!--引入jquery库-->
<script type="text/javascript" src="http://www.yilingsj.com/skin/yilingsj/js/jquery-1.8.3.min.js"></script>
<script>
// 定义一个变量，等会用来控制多次触发
var i=0;
$(window).scroll(function(){
//获取滚动时距离浏览器顶部的值
var t=$(this).scrollTop();
//获取当前窗口的高度
var h=$(this).height();
//获取按钮距离浏览器顶部的值
var h1=$('#loadmore').offset().top;
//用按钮的值-滚动条的值与窗口高度进行比较，如果小时，则表示按钮进入可视区，同时也表示滚动条即将到达底部
if(h1-t<h){
//防止快速下拉时多次触发
if(i==0){
//改变i的值
i=1;
//触发点击事件
$('#loadmore').click();
}
}
});
// 加载初始数据
var p = 1;
$.ajax({
type:"get",
url:'server.php?page=' + p,
data:{},
dataType:"json",
success:function(data){
for (var a in data){
$('#text').append("<p>"+data[a].resname+"</p>");
$("#loading").remove();
}
i=0;
},
error:function(data){
},
beforeSend:function(data){
$('#loading').append("加载中");
}
});
// 加载更多
$('#loadmore').click(function(){
p++;
$.ajax({
type:"get",
url:'server.php?page=' + p,
data:{},
dataType:"json",
success:function(data){
for (var a in data){
$('#text').append("<p>"+data[a].resname+"</p>");
$("#loading").remove();
}
i=0;
},
error:function(data){
$('#text').append("<p>"+服务器错误+"</p>");
},
beforeSend:function(data){
$('#loading').append("加载中");
}
});
});
</script>
server.php
<?php
header("Content-type:application/json");
header('Access-Control-Allow-Origin:*');
// 连接数据库
$con = mysql_connect("数据库地址","数据库账号","数据库密码");
if (!$con){die('Could not connect: ' . mysql_error());}
mysql_select_db("数据库名", $con);
mysql_query("SET NAMES UTF8");
// 每页显示条数
$pageLine = 5;
// 计算总记录数
$ZongPage = mysql_query("select count(*) from 表名");
// 计算总页数
$sum = mysql_fetch_row($ZongPage);
$pageCount = ceil($sum[0]/$pageLine);
// 定义页码变量
@$tmp = $_GET['page'];
// 计算分页起始值
$num = ($tmp - 1) * $pageLine;
// 查询语句
$result = mysql_query("SELECT 字段 FROM 表名 ORDER BY id DESC LIMIT " . $num . ",$pageLine");
//遍历输出
$results = array();
while ($row = mysql_fetch_assoc($result)) {
$results[] = $row;
}
echo json_encode($results);
//分页按钮
//上一页
$lastpage = $tmp-1;
//下一页
$nextpage = $tmp+1;
//防止翻过界
if (@$tmp > $pageCount) {
echo "[{\"result\":\"没有了\"}]";
}
// 关闭数据库连接
mysql_close($con);
?>
DEMO： 戳这里
作者：TANKING
微信：likeyunba520
网站： likeyunba.com
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
- 原生js如何实现懒加载？
- ios - 原生骨架屏，网络加载过渡动画的封装
- 原生实现img-lazyLoad:图片延迟加载（基于intersection Observer）
- 介绍同步加载、异步加载、延迟加载[原创]
- .net加载失败的程序集重新加载
- 虚拟机类加载机制：类加载时机
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
Web Data Mining
Bing Liu / Springer / 2006-12-28 / USD 59.95
Web mining aims to discover useful information and knowledge from the Web hyperlink structure, page contents, and usage data. Although Web mining uses many conventional data mining techniques, it is n......一起来看看 《Web Data Mining》 这本书的介绍吧!
