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

先添加按钮：

<a id="load-more-button" type="button">MORE</a>

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

        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后台接收接收页码计算后在数据库查询

<?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();
}