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

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

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

下一页

  • 案例显示形式

    学号姓名
    xxxxxx
    xxxxxx

  • 具体实现

    1. mysql链接要操作的数据库

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

    2. 获取数据库的记录数

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

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

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

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

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

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

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

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

    6. 实现当前页面随切换变化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的简单运用

  1. 首先我先贴出我自己写的一个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数据输出 
}

  2. 我贴出我前端对于这个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'>详细信息&gt;&gt;</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…)

总结

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

更多推荐

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