一、前置知识

在使用JavaScript实现JSON分页前，需要先掌握一些前置知识：

AJAX：用于实现异步的数据传输。
JSON：JavaScript Object Notation，一种轻量级的数据交互格式。

二、代码实现

1. 引入jQuery库

在实际应用中，我们常常使用jQuery库来使代码更加简洁，因此需要在HTML中引入jQuery库。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

2. 获取JSON数据

使用jQuery的$.ajax()方法获取JSON数据。在这里以获取豆瓣电影TOP250的JSON数据为例：

function getMovieData(page) {
    $.ajax({
        url: 'https://api.douban.com/v2/movie/top250',
        data: {
            start: (page - 1) * 20,
            count: 20
        },
        dataType: 'jsonp',
        success: function (result) {
            console.log(result); // 打印获取的JSON数据
        }
    });
}

其中，通过设置start和count参数来实现分页。start表示获取数据的起始位置，count表示每页需要获取的数据量。

3. 分页显示数据

获取到JSON数据后，我们需要将它们分页显示在页面上。

3.1 分页实现

首先，我们需要实现分页功能。以下是一个简单的分页函数：

function showPage(totalPage, currentPage) {
    var pagination = '';
    for (var i = 1; i <= totalPage; i++) {
        if (i === currentPage) {
            pagination += '<span class="active">' + i + '</span>';
        } else {
            pagination += '<span>' + i + '</span>';
        }
    }
    $('#pagination').html(pagination);
}

其中，totalPage表示总页数，currentPage表示当前页数。通过遍历总页数生成对应的页码标签，并将当前页数进行标注。

3.2 显示数据

接着，我们需要根据分页获取到的JSON数据，在页面上展示对应的数据。以下是一个简单的数据展示函数：

function showData(data) {
    var html = '';
    $.each(data, function (index, item) {
        html += '<div class="card">';
        html += '<div class="img"><img src="' + item.images.large + '" alt="' + item.title + '"></div>';
        html += '<div class="title">' + item.title + '</div>';
        html += '<div class="rating">评分：' + item.rating.average + '</div>';
        html += '</div>';
    });
    $('#movie-list').html(html);
}

其中，通过遍历获取到的JSON数据，生成对应的HTML代码，并将其渲染到页面上。

4. 完整代码

最后，我们将上述三个函数整合在一起，完成一个简单的JSON分页应用：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>JSON分页实例</title>
    <style>
        .card {
            background-color: #efefef;
            margin: 10px;
            padding: 10px;
            display: inline-block;
            width: 200px;
            text-align: center;
        }
        .card .img img {
            width: 100px;
            height: 150px;
        }
        .active {
            color: red;
        }
    </style>
</head>
<body>
    <div id="movie-list"></div>
    <div id="pagination"></div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        var currentPage = 1, // 当前页
            totalPage = 0; // 总页数

        // 获取JSON数据
        function getMovieData(page) {
            $.ajax({
                url: 'https://api.douban.com/v2/movie/top250',
                data: {
                    start: (page - 1) * 20,
                    count: 20
                },
                dataType: 'jsonp',
                success: function (result) {
                    console.log(result); // 打印获取的JSON数据
                    showData(result.subjects); // 将数据展示在页面上
                    totalPage = Math.ceil(result.total / 20); // 计算总页数
                    showPage(totalPage, currentPage); // 显示分页栏
                }
            });
        }

        // 分页实现
        function showPage(totalPage, currentPage) {
            var pagination = '';
            for (var i = 1; i <= totalPage; i++) {
                if (i === currentPage) {
                    pagination += '<span class="active">' + i + '</span>';
                } else {
                    pagination += '<span>' + i + '</span>';
                }
            }
            $('#pagination').html(pagination);
        }

        // 显示数据
        function showData(data) {
            var html = '';
            $.each(data, function (index, item) {
                html += '<div class="card">';
                html += '<div class="img"><img src="' + item.images.large + '" alt="' + item.title + '"></div>';
                html += '<div class="title">' + item.title + '</div>';
                html += '<div class="rating">评分：' + item.rating.average + '</div>';
                html += '</div>';
            });
            $('#movie-list').html(html);
        }

        // 初始化页面
        $(function () {
            getMovieData(currentPage); // 默认获取第一页的数据
        });

        // 点击分页按钮获取对应页数的数据
        $('#pagination').on('click', 'span', function () {
            currentPage = parseInt($(this).text()); // 获取当前页数
            getMovieData(currentPage);
        });
    </script>
</body>
</html>

当我们打开HTML页面时，就能看到一组豆瓣电影TOP250的数据，同时在下方生成了对应的分页栏。当我们点击分页栏中的页码时，会动态加载对应页数的数据。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：javascript实现json页面分页实例代码 - Python技术站

javascript实现json页面分页实例代码