使用jQuery的ajax方法，结合后端接口实现分页查询功能，提高页面加载速度和用户体验。
Ajax分页实例：分页查询实例
介绍
Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术，通过使用Ajax，我们可以实现数据的异步加载和更新，提高用户体验，在本例中，我们将演示如何使用Ajax实现分页查询功能。
准备工作
1、创建一个HTML文件，用于显示数据和分页导航。
2、创建一个JavaScript文件，用于处理Ajax请求和响应。
3、创建一个服务器端脚本，用于处理分页查询请求并返回数据。
HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF8">
<meta name="viewport" content="width=devicewidth, initialscale=1.0">
<title>Ajax分页实例</title>
<script src="ajax.js"></script>
</head>
<body>
<div id="content"></div>
<div id="pagination"></div>
</body>
</html>
JavaScript代码（ajax.js）
// 定义分页参数
var currentPage = 1; // 当前页码
var itemsPerPage = 10; // 每页显示的项目数
var totalItems = 100; // 总项目数
// 获取数据并显示在页面上
function getData() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var data = JSON.parse(xhr.responseText);
displayData(data);
displayPagination(data);
}
};
xhr.open("GET", "get_data.php?page=" + currentPage + "&items_per_page=" + itemsPerPage, true);
xhr.send();
}
// 显示数据在页面上
function displayData(data) {
var contentDiv = document.getElementById("content");
contentDiv.innerHTML = "";
for (var i = 0; i < data.length; i++) {
var item = data[i];
var itemDiv = document.createElement("div");
itemDiv.innerHTML = item;
contentDiv.appendChild(itemDiv);
}
}
// 显示分页导航在页面上
function displayPagination(data) {
var paginationDiv = document.getElementById("pagination");
paginationDiv.innerHTML = "";
var totalPages = Math.ceil(totalItems / itemsPerPage);
for (var i = 1; i <= totalPages; i++) {
var pageLink = document.createElement("a");
pageLink.href = "#";
pageLink.innerHTML = i;
pageLink.onclick = function() {
currentPage = i;
getData();
return false; // 阻止默认行为，避免页面跳转
};
paginationDiv.appendChild(pageLink);
}
}
// 初始化页面，获取第一页的数据并显示分页导航
getData();
服务器端脚本（get_data.php）
<?php // 获取分页参数 $page = isset($_GET['page']) ? $_GET['page'] : 1; // 当前页码，默认为1 $items_per_page = isset($_GET['items_per_page']) ? $_GET['items_per_page'] : 10; // 每页显示的项目数，默认为10 $offset = ($page 1) * $items_per_page; // 计算偏移量，用于从数据库中获取正确的数据范围 $limit = $items_per_page; // 限制查询结果的数量，防止性能问题和安全问题（SQL注入等）
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/529542.html
微信扫一扫 