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

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

atao4年前 (2020-10-17)脚本编程2985

下拉翻页是通过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://yizhanhongtu.cn/post/24.html

分享给朋友:

相关文章

PHP实现发送微信模板消息(公众号版),附类文件

PHP实现发送微信模板消息(公众号版),附类文件

以下为开发步骤:1.微信公众号为服务号且开通微信认证(其他类型账号不能发送)2.ip白名单设置你的服务器ip(用于获取access_token)3.网页授权你的域名(用于获取用户的openid)4.开...

PHP原生对接QQ互联/实现QQ登录,SDK2.1版本/超级详细!

PHP原生对接QQ互联/实现QQ登录,SDK2.1版本/超级详细!

在目前在大部分网站中都会接入QQ登录或者微信登录,目前QQ互联的接入门槛是比较低的,官方的前提是必须备案网站!!如果网站没有备案请某宝自行搜索一下其他方法。用QQ登录接口,首先要到QQ互联完善开发者认...

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

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

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

组织结构图OrgChart.js的简单使用,实现树状图结构

组织结构图OrgChart.js的简单使用,实现树状图结构

OrgChart.js是什么?基于ES6的组织结构图插件。特征支持本地数据和远程数据(JSON)。基于CSS3过渡的平滑扩展/折叠效果。将图表对齐为4个方向。允许用户通过拖放节点更改组织结构。允许用户...

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

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

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