前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Ajax+PHP实现点击加载更多无刷新加载下一页

Ajax+PHP实现点击加载更多无刷新加载下一页

作者头像
岳泽以
发布2023-04-27 19:31:49
8900
发布2023-04-27 19:31:49
举报
文章被收录于专栏:岳泽以博客岳泽以博客

先添加按钮:

代码语言:javascript
复制
<a id="load-more-button" type="button">MORE</a>

然后在JS中定义初始页和每页显示数量并进行Ajax请求:

代码语言:javascript
复制
        var currentPage = 1;
        var perPage = 4;
        function loadMore() {
            $.ajax({
                //请求方式
                type: 'get',
                //发送请求的地址
                //我这里的地址是不需要传数据的,所以没有拼接参数
                url: 'admin/controller/api.php',
                //服务器返回的数据类型
                dataType: 'json',
                // 提交给后台请求的的页数
                data: { per_page: perPage, offset: (currentPage - 1) * perPage },
                //请求成功的处理
                success: function (data) {
                    // console.log(data);
                    //拼接字符串
                    var str = '';
                    //对数据做遍历,拼接到页面显示
                    for (var i = 0; i < data.length; i++) {
                        str += '<div class="col-xs-6 col-md-3">' + '<div class="row thumbnail">' + '<div class="col-md-4">' + '<img src="' + data[i].blog_ico + '"/>' + '</div>' + '<div class="col-md-8 list-text">' + '<h3 class="list-title">' + '<a href="' + data[i].blog_link + 'target="_blank">' + data[i].blog_title + '</a>' + '</h3>' + '<p class="list-time">' + '认证时间:' + data[i].blog_time + '</a>' + '</p>' + '</div>' + '</div>' + '</div>'
                    }
                    //放入页面的容器显示
                    $('#contz').append(str);
                    currentPage++;
                },
                //请求失败的处理
                error: function (jqXHR) {
                    console.log(jqXHR);
                }
            });
        }
        // 初始调用加载一次
        loadMore();

        // 监听“加载更多”按钮的点击事件
        $('#load-more-button').on('click', function () {
            loadMore();
        });

PHP后台接收接收页码计算后在数据库查询

代码语言:javascript
复制
<?php
// 链接数据库
require_once('../config/config.php');
// 头部声明为json
header("Content-type:application/json");
// 获取每次加载的记录数和偏移量
$perPage = $_GET['per_page'];
$offset = $_GET['offset'];
try {
  // 数据库语句
  $sql = "select * from list where blog_status=1  LIMIT $offset, $perPage";
  // 有返回结果集,使用query函数,该函数返回结果为预处理对象。
  $stmt = $conn->prepare($sql);
  $stmt->execute();
  $res = $stmt->fetchAll(PDO::FETCH_ASSOC);
  // 转json输出
  echo json_encode($res, JSON_UNESCAPED_UNICODE);
} catch (PDOException $e) {
  echo $e->getMessage();
}
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2023 年 04 月,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
数据库
云数据库为企业提供了完善的关系型数据库、非关系型数据库、分析型数据库和数据库生态工具。您可以通过产品选择和组合搭建,轻松实现高可靠、高可用性、高性能等数据库需求。云数据库服务也可大幅减少您的运维工作量,更专注于业务发展,让企业一站式享受数据上云及分布式架构的技术红利!
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档