当前位置:首页 > 技术教程 > 脚本编程 > 正文内容

Ajax实现php页面下拉加载翻页(从mysql中获取数据)

atao2年前 (2020-10-17)脚本编程909

下拉翻页是通过ajax请求,把页码传入php处理页,在php处理页中获得分页后到数据库中查询数据并返回json数组对象。

1.gif

演示图

操作之前先建数据库,百度自行下载JQ库!

基本流程:

1.在首页中调用6条数据(本demo以6条数据为一页)并循环遍历显示在页面中

2.引入JQ,获取文档高度、窗口高度和滚动条高度,并定义页码变量

3.判断滚动条是否触底,如果触底便开始执行ajax、并把页码传给执行页

4.在执行页获取页码,然后到数据库中查询数据并转为json格式

5.首页ajax获取到执行页传来的json数据,并转为数组格式

6.通过if判断数据中是否存在数据,如果没有数据弹出提示

6.如果有数据便在js中循环遍历数据通过append()方法添加到页面中

7.执行完毕


模拟情景:

PHP版本:PHP7.3

数据库版本:Mysql5.7

数据库账号:root

数据库密码:root

数据库名字:ajax

实现目的:滚动条到底部时自动加载更多数据,全程无需重新加载整个页面

表名:type
idname
int(11)主键、自动递增varchar(20)


index.php代码

<?php
// 连接数据库,判断数据库错误这一步省略了
$con=mysqli_connect("localhost","root","root","ajax");
// 执行mysql查询语句
$rt = mysqli_query($con,"select name from type limit 6");
// 获取数据
$list = mysqli_fetch_all($rt,1);
?>
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="js/jquery.min.js"></script> <!-- 引入jq文件 -->
    <title>Document</title>
    <style>
        body{display: flex;flex-wrap: wrap;}
        div{display: inline-flex;border: 1px solid #000;text-align: center;height: 200px;width: 47.2%;margin: 5px;justify-content: center;align-items: center;}
    </style>
</head>
<body>
    <? foreach ($list as $k=>$v){ //foreach遍历数据 ?>
    <div><?=$list[$k]['name']?></div>
    <? } ?>
    
    <script>
        // 定义初始页码为2,因为我们已经获取完了第一页的数据
        var p=2;
        // 给整个页面添加滚动条事件
        $(document).scroll(function () {
            var dh = $(document).height(); //整个文档的高度
            var wh = $(window).height(); //整个窗口的高度
            var sh = $(document).scrollTop(); //滚动条的高度
            if(sh+wh>=dh){
                $.get("active.php",{p:p},function (data) { //通过ajax获取数据
                    var list = JSON.parse(data); //把ajax的json数据转为数组格式
                    if(list.length>0){ //数组内容大于0代表翻页成功
                        p++; //把页码加1
                        for (var i in list){ //循环遍历数据
                            $("body").append("<div>"+list[i]['name']+"</div>"); //把数据通过append格式插入到网页中
                        }
                    }else{ //下一页没有数据
                        alert("没有数据了");
                    }
                });
            }
        });
    </script>
</body>
</html>

active.php代码

<?php
$con=mysqli_connect("localhost","root","root","ajax");
$p = isset($_GET['p'])?$_GET['p']:""; //接到ajax通过get传过来的页码
$page = ($p - 1) * 6; //把页码-1*6 每页显示6条数据
$rt = mysqli_query($con,"select name from type limit {$page},6");
$list = mysqli_fetch_all($rt,1);
//将数组转为json
echo json_encode($list);
exit;




扫描二维码推送至手机访问。

版权声明:本文由武景涛的博客发布,如需转载请注明出处。

本文链接:http://www.yizhanhongtu.cn/post/24.html

分享给朋友:

相关文章

免费接入微信登录接口获取openid(无须申请,直接调用)

免费接入微信登录接口获取openid(无须申请,直接调用)

简介免费接入微信登录接口获取openid(无须申请,直接调用,适合web、pc、手机端,全平台兼容)无缝衔接微信获取openid、微信头像地址、微信昵称信息拿到openid之后,就可以自行操作更多身份...

超简单的php无限极分类,生成递归数组并输出树状图

超简单的php无限极分类,生成递归数组并输出树状图

什么是无限级分类?无限级分类是一种分类技巧,例如部门组织,文章分类,学科分类等常用到无限级分类,将其简单理解成分类就好了。其实我们仔细想一下,生活中的分类简直太多了,衣服可以分为男装和女装,也可以分为...

php微信支付类下载,包含统一下单、回调、退款方法。

php微信支付类下载,包含统一下单、回调、退款方法。

微信支付全流程类文件,包含:统一下单接口、回调验证、微信退款、xml转换、签名生成和CURL等方法,自用类文件非常全,希望大家可以借鉴。另外注意1、下载后的类文件在一个pay的文件夹。2、类文件会带有...

php基于QRcode类生成二维码,类文件下载

php基于QRcode类生成二维码,类文件下载

使用PHP语言生成二维码,还是挺有难度的,除了调用生成二维码图片的接口除外,如果自己写代码生成,真的无从下手。然而,我们可以使用phpqrcode这个现成的类文件,PHP二维码生成类库,利用它可以轻松...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。