php+ajax无限加载实例，过程记录

寻梦xunm| 673| 收集

3年前

超过1278天温馨提示

本文最后更新于2021年05月23日，已超过1278天没有更新，若内容或图片失效，请留言反馈。

之前我做过ajax的实现，但是和目前这种是有所不同的，当时是直接调用了cms的数据循环调用的功能，而用纯php写的还没试过。经过一段时间的测试分析，大概立即这个实例的全部流程，所以很有记录的必要。此实例设计数据库查询数据，并且将数组转化为json形式，前台的页面通过js将json获取并且呈现在页面上，这样就可以不需要跳转任何页面，甚至是不需要在同一个站点的进行数据获取。
本实例来源于素材火，本人仅做分析。

ajax.php代码如下：

<?php
$host = "localhost";
$db_user = "root";//用户名
$db_pass = "root";//密码
$db_name = "ajax";//数据库名
$link = mysql_connect($host, $db_user, $db_pass);
mysql_select_db($db_name, $link);
mysql_query("SET names UTF8");  //设置数据库连接编码为utf-8
header("Content-Type: text/html; charset=utf-8");  //设置页面编码为utf-8
$page = intval($_GET['page']);  //获取请求的页数 
$pagenum = 12; //每页数量
$start = ($page - 1) * $pagenum;
$query = mysql_query("SELECT * FROM ajax ORDER BY id ASC LIMIT $start," . $pagenum . "");  //数据库分页查询语句
$arr = array();  //初始化数组
while ($row = mysql_fetch_array($query)) {  //将数据库查询值写入数组
    $arr[] = array(
        'id' => $row['id'],
        'title' => $row['title']
    );
}
if ($arr) {  //判断数组是否存在值
    echo json_encode($arr);  //转换为json数据输出
}
?>

创建数据库表代码：

CREATE TABLE IF NOT EXISTS `ajax` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `title` varchar(100) NOT NULL,
  PRIMARY KEY (`id`)
)

以上代码实现后，就可以访问ajax.php查看效果，当然因为是分页查询，访问时需要带参数的，如ajax.php?page=1，具体效果如下，数据完全变为json形式。

随后当这一步实现的时候，就可以创建html页面了：

<div class="demo">
    <h2 class="tip">提示：使用滚动或拉动滚动条向下看。</h2>
    <div id="lists"></div> 
    <div class="nodata"></div>
</div>

因为我使用的是jquery，所以还需要引入这个，再写下面的js代码：

<script type="text/javascript">
    i = 1; //设置当前页数 
    $(function() {
        var totalpage = 6; //总页数，防止超过总页数继续滚动
        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;
                if (aa < 0.01) {
                    getJson(i)
                }
            } else { //否则显示无数据
                showEmpty();
            }
        });
        getJson(0); //加载第一页
    });
    function getJson(page) {
        $(".nodata").show().html("<img src='/loading.gif'/>");  //加载数据时显示的图片
            $.getJSON("ajax.php", {page: i}, function(json) {  //获取json文件
            if (json) {
                var str = "";
                $.each(json, function(index, array) {  //将获取的json数据处理并且写到id为lists的div中
                    var str = "<div class='per'>";
                    var str = str + "<div class='title'>" + array['id'] + "、" + array['title'] + "</div></div>";
                    $("#lists").append(str);
                });
                    $(".nodata").hide()  //当数据存在的时候隐藏加载gif图片
            } else {
                showEmpty();
            }
        });
        i++;
    }
    function showEmpty() {
        $(".nodata").show().html("别滚动了，已经到底了。。。");   //这句我就懒得说了。
    }
</script>

也就是如上了，实际效果我就不截图了，但是值得一提的是，无限加载基本上已经快要成为主流，学习一下肯定有用。

文章来源于:https://www.ruletree.club/archives/777/

加载教程无限加载 ajax

0 赞 or 打赏

喜欢就打赏一点