基于Jquery+Ajax+Json的高效分页实现代码

下面是关于“基于jQuery+Ajax+JSON的高效分页实现代码”的完整攻略：

一、前置知识

jQuery的基本用法
Ajax的基本用法
JSON的基本用法

以上三个知识点对于本文中的代码实现都是非常重要的，如果你还不熟悉或者不了解，建议先学习一下。

二、实现步骤

1. 编写HTML代码

<div id="content"></div>
<div id="page"></div>

其中，content是作为展示数据的容器，page是用于分页的容器。

2. 编写JavaScript代码

先看一下我们需要的几个函数：

// 发送ajax请求获取数据
function getList(pageNum) {
  $.ajax({
    url: "/list", // 请求地址
    data: { // 请求参数
      page: pageNum
    },
    type: "get",
    dataType: "json",
    success: function(data) {
      showList(data.list); // 展示数据
      showPage(data.totalPage, pageNum); // 展示分页
    }
  });
}

// 展示数据
function showList(list) {
  var html = "";
  for (var i = 0; i < list.length; i++) {
    html += "<li>" + list[i] + "</li>";
  }
  $("#content").html(html);
}

// 展示分页
function showPage(totalPage, currentPage) {
  var html = "";
  for (var i = 1; i <= totalPage; i++) {
    if (i == currentPage) {
      html += "<span>" + i + "</span>";
    } else {
      html += "<a href='javascript:void(0)' onclick='getList(" + i + ")'>" + i + "</a>";
    }
  }
  $("#page").html(html);
}

如上所示，我们先定义了三个函数，依次是：

getList(pageNum)：发送ajax请求获取数据，并调用showList()和showPage()函数展示数据和分页；
showList(list)：展示数据；
showPage(totalPage, currentPage)：展示分页。

接下来我们来看一下这三个函数具体是如何实现的。

`getList(pageNum)`

这个函数用于发送ajax请求，其中：

url：是请求的地址，这里示例是/list；
data：是请求的参数，这里只传了一个page参数表示当前页数；
type：是请求的方式，这里是get请求；
dataType：是指定返回的数据类型，这里是json格式；
success：是请求成功后的回调函数，其中data表示请求返回的数据对象，这里我们调用了showList()和showPage()函数。

`showList(list)`

这个函数用于展示数据，我们首先定义了一个html变量用于存储数据的展示代码，然后使用for循环遍历数据，在每一次循环中将数据拼接到html变量中，最后用jQuery的html()函数将html变量的值赋给content容器。

`showPage(totalPage, currentPage)`

这个函数用于展示分页，我们首先定义了一个html变量用于存储分页的展示代码，然后使用for循环遍历分页的页数，在每一次循环中判断当前页码和遍历到的页码是否相同，如果相同，就直接将当前页码用span标签包裹起来展示，否则将页码设置为链接并添加点击事件调用getList()函数传递当前页码作为参数，最后用jQuery的html()函数将html变量的值赋给page容器。

3. 代码实现

接下来，我们将前面的函数组合起来，实现代码如下：

$(function() {
  getList(1); // 默认调用第一页数据
});

这段代码表示当页面加载完成后（使用了jQuery的ready()函数），调用getList(1)函数获取第一页的数据。

三、实现示例

为了更好地理解上面的代码，这里给出两个示例。

示例一

假设有一个获取列表数据的接口/list，返回的数据格式为：

{
  "list": ["数据1", "数据2", "数据3", "数据4", "数据5", "数据6", "数据7", "数据8", "数据9", "数据10"],
  "totalPage": 4
}

接下来，我们将上面的代码实现到我们的页面中，完整代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>分页示例1</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    // 发送ajax请求获取数据
    function getList(pageNum) {
      $.ajax({
        url: "/list", // 请求地址
        data: { // 请求参数
          page: pageNum
        },
        type: "get",
        dataType: "json",
        success: function(data) {
          showList(data.list); // 展示数据
          showPage(data.totalPage, pageNum); // 展示分页
        }
      });
    }

    // 展示数据
    function showList(list) {
      var html = "";
      for (var i = 0; i < list.length; i++) {
        html += "<li>" + list[i] + "</li>";
      }
      $("#content").html(html);
    }

    // 展示分页
    function showPage(totalPage, currentPage) {
      var html = "";
      for (var i = 1; i <= totalPage; i++) {
        if (i == currentPage) {
          html += "<span>" + i + "</span>";
        } else {
          html += "<a href='javascript:void(0)' onclick='getList(" + i + ")'>" + i + "</a>";
        }
      }
      $("#page").html(html);
    }

    $(function() {
      getList(1); // 默认调用第一页数据
    });
  </script>
</head>
<body>
  <div id="content"></div>
  <div id="page"></div>
</body>
</html>

上面的代码中，我们通过ajax发送了一个get类型的请求到/list地址，并且携带了一个参数page来表示需要获取的页数。当请求成功时，返回一个JSON格式的数据，其中包含了一页的数据以及总页数，我们将返回的数据传递给showList()和showPage()函数，分别展示数据和分页。

示例二

除了通过后端接口获取数据以外，我们还可以模拟数据，在前端来实现分页。例如，我们有如下的list数组：

var list = [
  "数据1", "数据2", "数据3", "数据4", "数据5",
  "数据6", "数据7", "数据8", "数据9", "数据10",
  "数据11", "数据12", "数据13", "数据14", "数据15",
  "数据16", "数据17", "数据18", "数据19", "数据20"
];

然后我们通过以下代码将数据分成每页5条进行展示：

$(function() {
    // 分页配置
    var pageSize = 5; // 每页显示多少条数据
    var totalPage = Math.ceil(list.length / pageSize); // 总页数
    var currentPage = 1; // 当前页码

    // 展示数据
    function showList(startIndex) {
      var endIndex = startIndex + pageSize;
      var html = "";
      for (var i = startIndex; i < endIndex; i++) {
        if (i < list.length) {
          html += "<li>" + list[i] + "</li>";
        }
      }
      $("#content").html(html);
    }

    // 展示分页
    function showPage() {
      var html = "";
      for (var i = 1; i <= totalPage; i++) {
        if (i == currentPage) {
          html += "<span>" + i + "</span>";
        } else {
          html += "<a href='javascript:void(0)' onclick='getList(" + i + ")'>" + i + "</a>";
        }
      }
      $("#page").html(html);
    }

    // 获取数据
    function getList(pageNum) {
      currentPage = pageNum;
      var startIndex = (pageNum - 1) * pageSize;
      showList(startIndex);
      showPage();
    }

    // 默认展示第一页数据
    getList(currentPage);
  });

上面的代码中，我们抽象出了showList()和showPage()函数，在函数中根据数据和分页信息分别展示数据和分页，然后在getList()函数中，根据当前页码计算需要展示的数据，然后通过调用showList()和showPage()函数展示数据和分页。

对于这个示例，其实现过程与示例一是大致相同的，只是数据的获取方式不同而已。

希望这样的说明可以帮助你更好地理解和应用jQuery、Ajax和JSON技术实现高效分页。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：基于Jquery+Ajax+Json的高效分页实现代码 - Python技术站