奇乐网 - 草根博客网站

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

admin 451 0

之前我做过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形式。
php+ajax无限加载实例,过程记录

随后当这一步实现的时候,就可以创建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>

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

评论列表 (已有0条评论)

消灭零回复

发表评论 (已有0条评论)


选择表情