Ajax无刷新分页是一种在不刷新整个页面的情况下，通过异步请求加载和显示数据的技术。这种技术可以大大提高用户体验，使网页浏览更加流畅。
（图片来源网络，侵删）
准备工作
1、引入jQuery库：Ajax无刷新分页需要使用到jQuery库，因此需要在HTML文件中引入jQuery库。
<script src="https://code.jquery.com/jquery3.6.0.min.js"></script>
2、准备HTML结构：创建一个包含分页元素的HTML结构，如<div>元素用于显示分页信息。
<div id="pagination"> <a href="#" class="pagelink">«</a> <a href="#" class="pagelink">1</a> <a href="#" class="pagelink">2</a> <a href="#" class="pagelink">3</a> <a href="#" class="pagelink">4</a> <a href="#" class="pagelink">5</a> <a href="#" class="pagelink">»</a></div>
编写JavaScript代码
1、编写Ajax请求函数：使用jQuery的$.ajax()方法发送Ajax请求，获取当前页的数据。
function getData(page) { $.ajax({ url: 'your_server_url', // 服务器地址，根据实际情况修改 type: 'GET', // 请求类型，根据实际情况修改 data: { page: page, // 当前页码 pageSize: 10 // 每页显示的数据条数，根据实际情况修改 }, success: function(data) { // 请求成功后的回调函数，处理返回的数据并更新页面内容 } });}
2、编写分页点击事件处理函数：为分页元素添加点击事件，当点击某个分页时，调用getData()函数获取对应页的数据并更新页面内容。
$(document).ready(function() { var currentPage = 1; // 当前页码，默认为1 var pageSize = 10; // 每页显示的数据条数，根据实际情况修改 // 初始化页面内容 getData(currentPage); // 为分页元素添加点击事件 $('#pagination a').on('click', function(e) { e.preventDefault(); // 阻止默认行为，防止跳转页面 var targetPage = $(this).text(); // 获取点击的分页文本，即目标页码 if (targetPage !== '«' && targetPage !== '»') { // 排除首页和尾页的点击事件 currentPage = parseInt(targetPage); // 更新当前页码 getData(currentPage); // 调用getData()函数获取对应页的数据并更新页面内容 } else { // 如果点击的是首页或尾页，可以执行相应的操作，如跳转到第一页或最后一页等 } });});
通过以上步骤，可以实现一个简单的Ajax无刷新分页功能，在实际项目中，还需要根据具体需求对代码进行优化和完善。
Ajax 无刷新分页是一种常用的技术，可以让用户在浏览网页时实现分页效果而不需要重新加载整个页面，下面是一个简单的示例，展示如何使用 HTML、CSS 和 JavaScript（包含 jQuery）来创建一个带有 Ajax 无刷新分页功能的介绍。
（图片来源网络，侵删）
HTML 部分（index.html）
<!DOCTYPE html><html lang="zhCN"><head> <meta charset="UTF8"> <title>Ajax 无刷新分页示例</title> <style> /* 在这里添加 CSS 样式 */ table { width: 100%; bordercollapse: collapse; } th, td { padding: 8px; textalign: left; borderbottom: 1px solid #ddd; } th { backgroundcolor: #f2f2f2; } </style></head><body> <table id="dataTable"> <thead> <tr> <th>ID</th> <th>名称</th> <th>年龄</th> <!其他字段 > </tr> </thead> <tbody> <!数据将通过 Ajax 动态加载 > </tbody> </table> <div id="pagination"> <!分页按钮将通过 Ajax 动态生成 > </div> <script src="https://code.jquery.com/jquery3.6.0.min.js"></script> <script> // 在这里添加 JavaScript 和 Ajax 代码 $(document).ready(function() { function load_data(page) { $.ajax({ url: "fetch_data.php", type: "POST", data: {page: page}, success: function(data) { $("#dataTable tbody").html(data); } }); } load_data(1); // 初始化页面，加载第一页数据 $(document).on("click", ".pagination a", function(e) { e.preventDefault(); var page = $(this).attr("datapage"); load_data(page); }); }); </script></body></html>
PHP 部分（fetch_data.php）
<?php$connect = mysqli_connect("主机名", "用户名", "密码", "数据库名");$page = $_POST["page"];$limit = 5; // 每页显示的记录数$start = ($page 1) * $limit;$query = "SELECT * FROM 表名 LIMIT $start, $limit";$result = mysqli_query($connect, $query);while ($row = mysqli_fetch_array($result)) { echo ' <tr> <td>' . $row["id"] . '</td> <td>' . $row["name"] . '</td> <td>' . $row["age"] . '</td> <!其他字段 > </tr> ';}// 分页按钮$query = "SELECT * FROM 表名";$result = mysqli_query($connect, $query);$total_rows = mysqli_num_rows($result);$total_pages = ceil($total_rows / $limit);echo '<div class="pagination">';for ($i = 1; $i <= $total_pages; $i++) { echo '<a href="#" datapage="' . $i . '">' . $i . '</a>';}echo '</div>';?>
这是一个基础的例子，你可以根据具体需求进行相应的调整和扩展，注意，在实际部署时，你应该确保 PHP 文件中的数据库连接信息是正确的，并且做好相应的安全防护措施（如防止 SQL 注入）。
（图片来源网络，侵删）
感谢阅读，如有任何疑问或建议，请留言分享。
如果你对此技术感兴趣，不妨尝试实践一下，相信你会有更多收获。
```
评论留言