从0实现html页面下拉加载与下一页

从0实现html页面下拉加载与下一页

两个个星期前因为自己写博客网站的需要，特地学习了一下"换页"，现在反馈下自己的理解。

案例实现的语言为：php+html+mysql+javascript

下一页

案例显示形式

学号	姓名
xxx	xxx
xxx	xxx

具体实现

mysql链接要操作的数据库

//假设本地测试，使用“localhost”
$conn = mysql_connect("localhost","usrname","password");
mysql_query("set names 'gb2312'");
mysql_select_db("database_name",$conn);

获取数据库的记录数

//假设我们设置每条记录有一个id号
$sql1 = "select count(id) from guest";
$res1 = mysql_query($sql1,$conn);
$row1=mysql_fetch_row($res1);
if($row1){
$RecordCount = $row1[0]; //记录的总条数
}

初始化页面标号+页面设置

//如果有当前页就使用，没有就默认第一页。
if (!empty($_GET['PageCurrent'])){
$PageCurrent = $_GET['PageCurrent'];
}
else $PageCurrent = 1;

$PageSize = number; //每页的记录数
$pre = ($PageCurrent-1)*$PageSize;//开始读数据的“起始”页数
$Page = ceil($RecordCount/$PageSize);  //总页数 ceil:向上取整

从当前页面开始往后读number条记录

sql2 = "select * from guest limit $pre,$PageSize";
$res2 = mysql_query($sql2,$conn);

按照案例的显示读取两个数据

<tr>
<td><?php echo $row2['num'];?></td>
<td><?php echo $row2['name'];?></td>
</tr>

实现当前页面随切换变化PageCurrent也变化

//设定首页
echo "<a href='?PageCurrent = 1'>首页</a>";
for($i=1;$i<=$Page;$i++){
//这里的形式会给每个页面分配一个PageCurrent
//读者可以自己设置样式和不显示，这里作为例子不涉及
echo  " <a href='?PageCurrent=$i'>$i</a> ";
}
//设定尾页
echo  " <a href='?PageCurrent=$Page'>末页</a> ";
echo "共 ".$RecordCount." 条记录";

[x] 图示



下拉加载

有了上面的例子，大家对sql的操作就有了一定的了解，对于我要实现的也就够用了。

我要这部分要讲的主要是实现下拉的中ajax的简单运用

首先我先贴出我自己写的一个ajax的php，看客看了上面的应该很容易懂

$link = mysql_connect($host, $db_user, $db_pass);
mysql_select_db($db_name, $link);

//让前端后段都能支持中文字符
mysql_query("set character set 'utf8'");//读库
mysql_query("set names 'utf8'");//写库

//接收前端传递过来的变量
$page = intval($_GET['page']);  //获取请求的页数

$pagenum = number; //每页数量
$start = ($page) * $pagenum;
$query = mysql_query("SELECT * FROM 博文信息表 order by 上传时间 DESC LIMIT $start," . $pagenum . "");
$arr = array();
//以数组的形式获取要在前端显示的信息，用于传递
while ($row = mysql_fetch_array($query)) {
$arr[] = array(
//我的数据库内存的各自信息的“名字”
'博文地址' => $row['博文地址'],
'博文题目' => $row['博文题目'],
'上传时间' => $row['上传时间'],
'作者' => $row['作者'],
'图片地址' => $row['图片地址'],
'简介' => $row['简介']

);
}
if ($arr) {
echo json_encode($arr);  //转换为json数据输出
}

我贴出我前端对于这个ajax的“支持”

<script>
i = 0; //设置当前页数
//pages的获取需要自己提前php设定，比如数据库总记录数/每页显示记录数目
var totalpage = "<?php echo $pages;?>"; //总页数，防止超过总页数继续滚动
$(function() {
var winH = $(window).height(); //页面可视区域高度
$(window).scroll(function() {
// 当滚动的页数小于总页数的时候，继续加载
if(i < totalpage) {
var pageH = $(document.body).height();
var scrollT = $(window).scrollTop(); //滚动条top
var aa = (pageH - winH - scrollT) / winH;
//加入滚动条到达底部时下拉则“<0”，执行
if (aa <= 0) {
// 设置一个卡顿延时,突出效果
for(var t = Date.now();Date.now() - t <= 400;);
getJson(i);
}
} else { //否则显示无数据
showEmpty();
}
});
getJson(0); //加载第一页
});
function getJson(page) {
//将page这个变量传递到我的ajax中去
$.getJSON("ajax.php", {page: i}, function(json) {
if (json) {
//str用于接收信息，这里用于形成端完成的html
var str = "";
$.each(json, function(index, array) {
var str = "<h2><a title='#' href=";
var str = str + array['博文地址'] + ">";
var str = str + array['博文题目'] + "</a></h2>";
var str = str + "<p class='dateview'><span>发布时间："+ array['上传时间'];
var str = str + "</span><span>作者：" + array['作者'] + "</span><span></span></p>";
var str = str + "<figure><a title=" + array['博文题目'] + "><img src=" + array['图片地址'];
var str = str + "></a></figure> <ul class='nlist'><p>";
var str = str + array['简介'];
var str = str + "</p> <a href=" + array['博文地址'] + " target='_blank' class='readmore'>详细信息>></a> </ul> <div class='line'></div>";
$("#div_id").append(str);
});
} else {
showEmpty();
}
});
i++;
}
//全部读完给个提示,例如：<h2  id="hide" style="display: none">已经没有数据了<h2>
function showEmpty() {
hide.style.display = 'block';
}
</script>

[x] 图示 (作者的未完工的demo…)





总结

很多问题网上零散已经有解决方案，我就是大致合成了一下。
肯定还有更好的解决方案+_+