Ajax读取数据之分页显示篇实现代码

Ajax是一种在Web应用程序中创建异步请求的技术。本篇攻略将演示如何使用Ajax读取数据并分页显示。

实现步骤

1.后端：编写接口，提供数据。

2.前端：使用Ajax从后端读取数据并展示。

3.前端：实现分页逻辑。

下面是这些步骤的详细说明。

编写接口

我们需要提供一个接口来获取数据。可以使用PHP、Java或任何其他后端编程语言编写接口。下面是一个使用PHP编写的简单示例：

<?php
header('Content-Type: application/json;charset=utf-8');
$page = $_GET['page'] ?? 1; // 页码
$pageSize = $_GET['pageSize'] ?? 10; // 每页显示的数量
$offset = ($page - 1) * $pageSize; // 偏移量
$data = [];
for ($i = 0; $i < $pageSize; $i++) {
    $data[] = [
        'id' => $offset + $i + 1,
        'name' => '商品 ' . ($offset + $i + 1),
    ];
}
echo json_encode([
    'status' => 1,
    'message' => '成功',
    'data' => $data
]);

这个接口将返回JSON格式的数据，其中status表示接口调用是否成功，message是接口的提示信息，data是数据。在这个示例中，接口将返回指定的页码和每页显示数量的商品信息。

使用Ajax从后端读取数据并展示

我们可以使用jQuery中的$.ajax()方法来从后端读取数据。这是一个简单的示例：

$(function () {
    loadData(1, 10); // 页面加载完成后加载第一页数据

    // 加载数据
    function loadData(page, pageSize) {
        $.ajax({
            url: 'api.php',
            type: 'GET',
            data: {
                page: page,
                pageSize: pageSize
            },
            dataType: 'json',
            success: function (result) {
                if (result.status === 1) {
                    showData(result.data); // 展示数据
                    showPagination(page, pageSize, result.total); // 展示分页
                } else {
                    alert(result.message);
                }
            },
            error: function () {
                alert('网络错误');
            }
        });
    }

    // 展示数据
    function showData(data) {
        var $tbody = $('#table-data tbody');
        $tbody.empty();
        for (var i = 0; i < data.length; i++) {
            var $tr = $('<tr>');
            $tr.append($('<td>').text(data[i].id));
            $tr.append($('<td>').text(data[i].name));
            $tbody.append($tr);
        }
    }

    // 展示分页
    function showPagination(page, pageSize, total) {
        var pageCount = Math.ceil(total / pageSize);
        var $pagination = $('#pagination');
        $pagination.empty();
        var $prev = $('<li>').addClass('page-item').append($('<a>').addClass('page-link').text('上一页'));
        if (page === 1) {
            $prev.addClass('disabled');
        } else {
            $prev.data('page', page - 1).click(function () {
                var page = $(this).data('page');
                loadData(page, pageSize);
            });
        }
        $pagination.append($prev);
        for (var i = 1; i <= pageCount; i++) {
            var $page = $('<li>').addClass('page-item');
            if (i === page) {
                $page.addClass('active');
            }
            $page.append($('<a>').addClass('page-link').text(i).data('page', i).click(function () {
                var page = $(this).data('page');
                loadData(page, pageSize);
            }));
            $pagination.append($page);
        }
        var $next = $('<li>').addClass('page-item').append($('<a>').addClass('page-link').text('下一页'));
        if (page === pageCount) {
            $next.addClass('disabled');
        } else {
            $next.data('page', page + 1).click(function () {
                var page = $(this).data('page');
                loadData(page, pageSize);
            });
        }
        $pagination.append($next);
    }
});

这个示例将从后端获取商品数据，并将这些数据展示在带有ID为table-data的表格中。接下来我们将实现分页逻辑。

实现分页逻辑

为了实现分页逻辑，我们需要在前端创建一个分页控件。在这个示例中，我们将使用Bootstrap来创建分页控件。这是一个示例：

<div class="container">
    <table class="table" id="table-data">
        <thead>
        <tr>
            <th>ID</th>
            <th>名称</th>
        </tr>
        </thead>
        <tbody>
        <!-- 数据将动态插入到这里 -->
        </tbody>
    </table>
    <nav>
        <ul class="pagination" id="pagination">
            <!-- 分页控件将动态插入到这里 -->
        </ul>
    </nav>
</div>

在showPagination()方法中，我们将创建分页控件并将其动态插入到ID为pagination的元素中。在点击分页按钮时，将重新加载数据。

参考文献

1. jQuery官方文档，https://api.jquery.com/jquery.ajax/。

2. Bootstrap官方文档，https://getbootstrap.com/docs/5.0/components/pagination/。