排行榜 统计
  • 建站日期:2017-05-08
  • 文章总数:446 篇
  • 评论总数:6393 条
  • 分类总数:25 个
  • 最后更新:10月9日

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

本文阅读 3 分钟
广告

之前我做过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形式。
1.png

随后当这一步实现的时候,就可以创建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/
jquery实现对文本框数值增减
« 上一篇 07-04
今怀:世界上最美的爱
下一篇 » 07-07
广告

发表评论

成为第一个评论的人

作者信息

热门文章

标签TAG

热评文章