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

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

atao1年前 (2020-10-17)脚本编程626

下拉翻页是通过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

分享给朋友:

相关文章

ThinkPHP框架下使用七牛云上传图片(文件)与删除

ThinkPHP框架下使用七牛云上传图片(文件)与删除

七牛云好处:云存储,云加速,CDN镜像存储等等,自直观的说,就是把一些静态文件如:css、js、图片等存储到七牛云,然后通过一个分配的或者自己绑定的域名开启CDN加速去访问,这样既减少了自己的服务器压...

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

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

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

PHP微信开发-接口配置信息,入口文件Token配置失败解决办法

PHP微信开发-接口配置信息,入口文件Token配置失败解决办法

微信接口配置需要用到https开头的域名,然后将路径填写正确 如下下面是index.php代码://设置接口配置信息 $timestamp = $_GET['timest...

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

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

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

file_get_contents()对指定网页或API实现get+post请求并传输获取数据

file_get_contents()对指定网页或API实现get+post请求并传输获取数据

//GET请求方法 $url="https://www.baidu.com"; $ret=file_get_contents($url); $list = ...

发表评论

访客

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