先添加按钮：
代码语言：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();
}
