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

首先讲解一下如何使用JavaScript实现JSON数据的页面分页。

一、前置知识

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

  1. AJAX:用于实现异步的数据传输。
  2. 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技术站

(0)
上一篇 2023年5月27日
下一篇 2023年5月27日

相关文章

  • 带你搞懂js的深拷贝

    带你搞懂js的深拷贝 在JavaScript中,拷贝是一项非常重要的任务,因为在JavaScript中,赋值操作并不是简单的复制一个变量的值到另一个变量,而是复制该变量所持有的引用地址,这意味着如果你直接将一个变量赋值给另一个变量,那么两者将共享同一份数据,即数据的修改将会同步。因此,当你需要对数据进行操作和修改时,深拷贝是至关重要的。 深拷贝的实现 实现一…

    JavaScript 2023年5月27日
    00
  • js预载入和JavaScript Image()对象使用介绍

    让我详细给您讲解“js预载入和JavaScript Image()对象使用介绍”的完整攻略。 什么是js预载入 当一个web页面中有大量的图片、音频等素材需要加载时,页面加载速度会明显减慢,给用户带来不好的体验。而js预载入能够做到在页面需要使用某个资源的时候提前加载资源,这样能够极大的提升用户页面加载体验。如何实现呢?下面我来介绍一下实现的具体步骤: 首先…

    JavaScript 2023年5月27日
    00
  • vue使用GraphVis开发无限拓展的关系图谱的实现

    Vue使用GraphVis开发无限拓展的关系图谱的实现 简介 GraphVis是一款基于JavaScript的网络可视化库,它支持将任何TCP/IP网络视为节点和边的集合,还支持关系网和流程图的绘制。在Vue项目中使用GraphVis可以方便地展示关系图谱,并且可以轻松实现拓展。 实现过程 步骤一:安装GraphVis库 可以使用npm命令来安装GraphV…

    JavaScript 2023年6月11日
    00
  • JavaScript数组排序小程序实现解析

    解析“JavaScript数组排序小程序实现解析”主要包括以下几部分内容:排序算法介绍、JavaScript实现示例、代码解析。 排序算法介绍 在介绍JavaScript数组排序小程序实现之前,需要了解几种排序算法的基本原理。 冒泡排序(Bubble Sort) 冒泡排序是一种简单的排序算法。它重复地走访过要排序的数组,一次比较两个元素,如果它们的顺序错误就…

    JavaScript 2023年5月28日
    00
  • jquery.qtip提示信息插件用法简单实例

    下面就来详细讲解“jquery.qtip提示信息插件用法简单实例”的完整攻略。 什么是jquery.qtip提示信息插件 jquery.qtip提示信息插件是一个jQuery插件,它可以用来在页面中快速、方便地创建提示信息。其使用简单,功能强大,支持各种提示效果,是一款非常实用的前端开发工具。 jquery.qtip提示信息插件的安装和使用 jquery.q…

    JavaScript 2023年6月11日
    00
  • javascript中Date()函数在各浏览器中的显示效果

    Date() 函数在 JavaScript 中是用来获取当前时间或者指定时间的对象。在不同的浏览器中,Date() 函数的表现可能会有所区别。下面是详细的攻略。 1. Date() 函数的基本用法 首先来看一下 Date() 函数的基本用法。创建 Date() 对象实例,可以不传参或者传入数字、字符串等表示时间的参数,如下: const now = new …

    JavaScript 2023年5月27日
    00
  • JavaScript实现简单表单验证案例

    当编写一个表单的时候,为了保证提交的数据正确性以及安全性,我们需要对用户输入的数据进行验证。而 JavaScript 可以提供灵活的表单验证功能,使得表单数据的验证更加方便和高效。 以下是一个可用于表单验证的基本攻略: 获取表单元素对象 通过使用 JavaScript的 DOM 操作获取表单元素对象,以便于后续的获取用户输入和验证数据。 示例: let in…

    JavaScript 2023年6月10日
    00
  • 详解require.js配置路径的用法和css的引入

    认真阅读本文后,你将完整掌握使用require.js配置路径的方法和css文件的引入方法。 require.js配置路径的用法 require.js是一个基于AMD标准的JavaScript模块加载工具,它可以帮助我们对JavaScript代码进行模块化管理。在使用require.js的过程中,我们需要配置路径来告诉require.js加载什么模块,以及该模…

    JavaScript 2023年6月11日
    00
合作推广
合作推广
分享本页
返回顶部