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)
上一篇 3天前
下一篇 2天前

相关文章

  • Javascript创建类和对象详解

    Javascript创建类和对象详解 在Javascript中,我们可以使用构造函数和原型对象的方式来创建类和对象。 构造函数 构造函数是一个普通的函数,用于初始化一个对象。在使用new运算符生成一个对象时,会自动创建一个空对象,并将该对象传递到构造函数中,最终返回这个对象。构造函数的命名规则是约定俗成的首字母大写。 示例1 function Person(…

    JavaScript 3天前
    00
  • 详解JavaScript基于面向对象之继承

    详解JavaScript基于面向对象之继承 概述 继承是面向对象编程中非常重要的一个概念,在JavaScript中也有着广泛的运用。继承可以使代码更加简洁、优雅,使得实现代码复用更加方便。本文将详细讲解JavaScript基于面向对象之继承的完整攻略。 继承的概念 继承就是子类通过复用父类的属性和方法,使得子类可以从父类中获得所有的非私有成员。在JavaSc…

    JavaScript 3天前
    00
  • JavaScript起点(严格模式深度了解)

    JavaScript起点(严格模式深度了解) 什么是严格模式? 严格模式是 ECMAScript 5 引入的一种运行模式,主要作用是弥补了 JavaScript 语言本身一些缺陷,提高了代码的运行效率,增强了安全性。通过开启严格模式,可以使 JavaScript 代码更加规范、更加安全、更加高效。 开启严格模式有两种方式: 在全局环境中使用 ‘use str…

    JavaScript 2023年5月19日
    00
  • 细说JS数组遍历的一些细节及实现

    细说JS数组遍历的一些细节及实现 简介 JavaScript中的数组是一种数据结构,用于存储一组元素。数组常常使用循环来遍历其中的元素,这篇文章将详细讲解JS数组的遍历,以及在遍历过程中需要注意的一些细节。 遍历数组的方法 for循环 for循环是遍历数组最基础、最常用的方法。for循环遍历数组时,可以使用数组的length属性获取数组的长度,通过遍历其下标…

    JavaScript 2天前
    00
  • 你可能不知道的JavaScript位运算符详解

    你可能不知道的JavaScript位运算符详解 介绍 在JavaScript中,除了常用的加减乘除运算符,还有一些位运算符。这些运算符可以对给定的数字进行二进制位操作。本文将为你详细讲解这些运算符。 位运算符分类 JavaScript中一共有7种位运算符,可以分为以下几类: 按位与运算符(&) 按位或运算符(|) 按位异或运算符(^) 左移运算符(&…

    JavaScript 2天前
    00
  • JS图片预加载三种实现方法解析

    JS图片预加载三种实现方法解析 在前端开发中,图片预加载可帮助我们实现更流畅、更高效的用户体验,避免用户在加载大量图片的时候长时间处于白屏状态。本文将介绍三种JS图片预加载的实现方法。 原生JS实现 原生JS实现图片预加载的方法比较简单,我们只需要动态创建img标签,并设置img的src属性为需要预加载的图片地址即可,如下所示: function preLo…

    JavaScript 3天前
    00
  • 通过jsonp获取json数据实现AJAX跨域请求

    使用JSONP技术实现AJAX跨域请求的步骤如下: 1.在主页面中定义一个回调函数,函数名保证唯一性。这个回调函数会接受JSON数据作为参数,并对其进行处理。 例如: function handleJsonData(data) { console.log(data); }; 2.在主页面中创建一个script标签,标签的src属性指向JSON数据请求的网址链…

    JavaScript 2天前
    00
  • javascript中一些奇葩的日期换算方法总结

    下面是“JavaScript中一些奇葩的日期换算方法总结”的完整攻略: JavaScript中一些奇葩的日期换算方法总结 本文总结了JavaScript中一些奇葩的日期换算方法,包括闰年判断、日期比较、日期计算等。 闰年判断 判断一个年份是否为闰年是常见的需求。以下是两种判断方法: 方法一:用取模运算符 闰年的判断标准: 能够被4整除,但不能被100整除,或…

    JavaScript 2天前
    00
  • 记录-JS简单实现购物车图片局部放大预览效果

    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 一、实现效果 二、代码实现 代码不多,先看一下 HTML 里面结构很简单,初始化 MagnifyingGlass 对象来关联一个 IMG 标签来实现放大。 <!DOCTYPE html> <html> <head> <meta charset=”utf-8…

    JavaScript 2023年4月22日
    00
  • javascript引用对象的方法

    下面就是关于Javascript引用对象的方法的详细讲解。 什么是引用对象 Javascript中引用对象是一种特殊的对象,它不像普通对象一样存储值,而是存储对一个值的引用。当我们使用引用对象时,它们通常是用来访问、修改或删除关联值的。 引用对象的方法 引用对象有很多方法,下面我们来逐一讲解这些方法。 1. call() 和 apply() call()和a…

    JavaScript 3天前
    00