以下是一个基于AJAX的分页实例：
-
在HTML页面中，添加一个容器元素来显示每一页的内容：
<div id="content"></div> -
添加一个分页导航栏，用于点击切换页码：
<div id="pagination"></div> -
在页面底部导入jQuery库和自定义的JavaScript代码：
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="pagination.js"></script> -
在pagination.js文件中，编写AJAX请求和分页逻辑的代码：
$(document).ready(function() { var currentPage = 1; // 当前页码 // 获取并显示指定页码的内容 function showPage(page) { $.ajax({ url: '/get_page_content.php', type: 'GET', data: { page: page }, success: function(response) { $('#content').html(response); currentPage = page; }, error: function() { console.log('Error loading page'); } }); } // 点击页码时切换页面内容 $(document).on('click', '.pagination-link', function() { var page = $(this).data('page'); if (page != currentPage) { showPage(page); } }); // 初始化页面，显示第一页内容 showPage(1); }); -
在服务器端的get_page_content.php文件中，处理AJAX请求，根据页码返回对应的内容：
$page = $_GET['page']; // 根据$page获取相应的内容，可以从数据库中查询或其他方式获取 $content = 'Page ' . $page . ' content'; echo $content;
通过以上代码，你将可以实现一个简单的基于AJAX的分页功能。当用户点击页码时，通过AJAX请求从服务器获取对应页码的内容，并将其显示在页面上。
以下是一个简单的使用Ajax实现分页的例子：
HTML部分：
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var currentPage = 1;
// 初始化页面数据
loadPageData(currentPage);
// 点击上一页按钮
$('#prev-btn').click(function(){
currentPage--;
loadPageData(currentPage);
});
// 点击下一页按钮
$('#next-btn').click(function(){
currentPage++;
loadPageData(currentPage);
});
// 加载页面数据
function loadPageData(page) {
$.ajax({
url: 'data.php',
type: 'GET',
dataType: 'json',
data: { page: page },
success: function(data) {
// 清空表格数据
$('#table-body').empty();
// 更新表格数据
$.each(data, function(index, item){
$('#table-body').append('<tr><td>' + item.id + '</td><td>' + item.name + '</td><td>' + item.age + '</td></tr>');
});
// 更新当前页数显示
$('#current-page').text(page);
},
error: function(xhr, status, error) {
console.log(error);
}
});
}
});
</script>
</head>
<body>
<table>
<thead>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</thead>
<tbody id="table-body">
<!-- 表格数据动态加载 -->
</tbody>
</table>
<button id="prev-btn">上一页</button>
<span id="current-page">1</span>
<button id="next-btn">下一页</button>
</body>
</html>PHP部分（data.php）：
<?php
// 模拟数据库查询，返回数据
$data = array();
// 获取当前页数
$page = isset($_GET['page']) ? intval($_GET['page']) : 1;
// 每页显示的记录数
$pageSize = 10;
// 总记录数
$total = 100;
// 总页数
$totalPage = ceil($total / $pageSize);
// 计算偏移量
$offset = ($page - 1) * $pageSize;
// 查询数据
for ($i = $offset; $i < ($offset + $pageSize); $i++) {
$data[] = array(
'id' => $i + 1,
'name' => 'User' . ($i + 1),
'age' => 20 + $i % 10
);
}
// 返回数据
header('Content-Type: application/json');
echo json_encode($data);上述例子中，前端页面通过点击“上一页”和“下一页”按钮来切换页码并使用Ajax请求服务器端的数据。服务器端使用PHP模拟数据库查询，返回相应的数据。前端页面在接收到数据后更新表格内容和当前页数的显示。
发布者：luotuoemo，转转请注明出处：https://www.jintuiyun.com/115845.html
