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日

相关文章

  • element UI中在 el-select 与 el-tree 结合组件实现过程

    如果想要在Element UI中通过一个下拉菜单选择树节点,在代码中的实现过程中,我们需要将el-tree组件的节点数据绑定在el-select组件中。下面是实现过程的详细攻略: 1. 被选择节点的数据获取 我们先给el-tree添加ref属性,这样我们在javascript中可以通过$refs属性访问到el-tree组件的实例对象,进而获取到我们选择的节点…

    JavaScript 2023年6月10日
    00
  • 基于AngularJS实现iOS8自带的计算器

    很高兴能够为您提供“基于AngularJS实现iOS8自带的计算器”的完整攻略。 简介 这个项目的目标是使用 AngularJS 实现一个和iOS8系统中自带计算器类似的计算器应用程序。在本文档中,我们将使用 HTML、CSS 和 JavaScript 来完成此目标,并探讨一些实现上的细节。 实现 开始 首先,在命令行中创建一个名为 angular-calc…

    JavaScript 2023年6月11日
    00
  • 详解JNA中的回调方法

    详解JNA中的回调方法 JNA(Java Native Access)是一个Java平台下的native代码访问库,它提供了一种使用Java与C或C++等底层语言进行交互的机制。在JNA中,由Java程序发起对底层库的调用,而不需要直接使用Java Native Interface(JNI)。在JNA中,回调方法是进行Java代码与C代码交互的重要方式。本文…

    JavaScript 2023年5月28日
    00
  • JavaScript运行原理分析

    JavaScript运行原理分析 JavaScript是一种高级编程语言,常用于Web开发中的动态交互效果。但是,在进行JavaScript的开发时,我们需要了解JavaScript运行的原理以及其在网页中的执行方式。本文将对JavaScript运行原理进行详细的分析。 JavaScript的运行方式 在Web开发过程中,JavaScript代码的运行是由浏…

    JavaScript 2023年5月17日
    00
  • vue2模拟vue-element-admin手写角色权限的实现

    Vue2模拟Vue-element-admin手写角色权限的实现,可以通过以下步骤完成: 1. 安装依赖 首先需要安装以下依赖:Vue-Router(用于控制路由)、Axios(用于发送http请求),可使用如下命令: npm install vue-router axios 2. 构建基本页面布局 在Vue项目中创建相应的组件并进行基本页面布局,如Head…

    JavaScript 2023年6月11日
    00
  • JavaScript定义及输出螺旋矩阵的方法详解

    JavaScript定义及输出螺旋矩阵的方法详解 什么是螺旋矩阵? 螺旋矩阵是指在一个矩阵中,先从左上角开始,按照顺时针方向,从外层到内层,逐个把矩阵中的数字输出,最终输出的结果就是一个螺旋形。 例如,下图所示的矩阵 1 2 3 4 5 6 7 8 9 输出的螺旋形就是:1 2 3 6 9 8 7 4 5。 实现螺旋矩阵的方法 实现螺旋矩阵的方法有多种,其中…

    JavaScript 2023年5月28日
    00
  • jQuery的cookie插件实现保存用户登陆信息

    以下是详细讲解“jQuery的cookie插件实现保存用户登陆信息”的完整攻略: 1. 什么是jQuery的cookie插件 jQuery的cookie插件可以帮助我们方便地操作cookie(HTTP Cookies),从而实现在浏览器端存储和读取数据的功能。它基于jQuery,使用简单方便,是一个非常实用的插件。 2. 如何使用jQuery的cookie插…

    JavaScript 2023年6月11日
    00
  • JavaScript中函数的常用写法及调用方法

    Javascript中函数的常用写法及调用方法,主要可分为函数声明和函数表达式两种方式,下面详细说明: 函数声明 函数声明是将函数定义提前,可以在函数定义之前使用该函数。 函数声明的基本格式为: function 函数名(参数1,参数2,…){ //函数体 return 函数返回值; } 函数声明的示例代码如下: //定义一个函数,实现两数相加 func…

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