在前端开发中，经常需要使用 Ajax 技术获取服务器上的数据。而且，在实际应用中经常需要对这些数据进行分页展示。本文将介绍如何使用 AngularJS 简化 Ajax 获取数据并实现数据分页。
AngularJS 简介
AngularJS 是一个用于构建 Web 应用程序的 JavaScript 框架。它是由 Google 维护的开源框架，旨在使前端开发更加容易，同时提供了强大的工具和功能，比如数据绑定、依赖注入、模板系统等。
AngularJS 具有解决复杂性问题的特性，可以帮助你管理你的代码，使其在规模、复杂度等方面进行优化。
Ajax 技术
Ajax 技术是一种在不刷新整个页面的情况下，使用 JavaScript 与服务器进行异步通信的技术。通过 Ajax 技术，可以使 Web 应用程序更加流畅地与服务器进行交互，提高用户体验。
在 AngularJS 中，可以使用 $http 服务来执行 Ajax 请求。这个服务封装了 XmlHttpRequest 请求，并提供了许多方便的方法来发送 Ajax 请求，比如 $http.get()、$http.post() 等。
数据分页
在 Web 应用程序中，经常需要对大量数据进行分页处理。如果将所有数据都展示在同一页中，会导致页面加载缓慢，用户体验非常糟糕。因此，数据分页变得非常重要。通过分页技术可以将大量数据分割为多个小块，便于用户查看。
在 AngularJS 中，可以使用 ng-repeat 指令来实现动态生成页面元素，这个指令从数据数组中迭代读取数据，并根据 HTML 模板动态创建页面元素。
实现 Ajax 获取数据并分页展示
下面，我们将通过一个示例来演示使用 AngularJS 来简化 Ajax 获取数据并实现数据分页。
假设我们有一个 RESTful API，可以通过 HTTP GET 方法获取用户列表。该 API 的 URI 为 /api/users，返回数据格式如下所示：
-
-------- -
------ ---- ------- -------- -------- ---------------------
------ ---- ------- ------ -------- -------------------
------ ---- ------- ---------- -------- -----------------------
------ ---- ------- -------- -------- ---------------------
------ ---- ------- ------ -------- -------------------
------ ---- ------- -------- -------- ---------------------
------ ---- ------- --------- -------- ----------------------
------ ---- ------- -------- -------- ---------------------
------ ---- ------- -------- -------- ---------------------
------ ----- ------- ------- -------- -------------------
-
-我们需要将该 API 返回的用户列表展示在页面上，并按照每页最多显示 5 条数据的方式进行分页。在显示数据时，需要在每条数据的最后添加一个“删除”按钮，当用户点击该按钮时可以将对应的用户从列表中删除，并发送 DELETE 请求至服务器。
现在，我们开始介绍如何使用 AngularJS 来实现上述功能。
1. HTML 结构
首先，我们需要在 HTML 页面中添加所需的标签，并绑定相应的 AngularJS 控制器，以便可以在页面上动态显示用户数据：
---- -------------------------
-------
-------
----
-----------
-------------
--------------
---------------
-----
--------
-------
--- --------------- -- -------
--------------------
----------------------
-----------------------
----
------- ----------------------------------------------
-----
-----
--------
--------
--- -------------------
--- -------------------- ----------- --- ----
-- -------- ----------------------------------
-----
--- --------------- -- ----- ----- -- -------
------------------ ----------- --- -------
-- -------- -------------------------------------
-----
--- -------------------- ----------- --- -----------
-- -------- ------------------------------
-----
-----
------在上面的代码中，我们使用了一个表格来展示数据，在表格中，我们绑定了一个名为 users 的数组，这个数组用于存储从服务器获取到的用户列表数据。
在表格中的每一行最后，我们添加了一个“删除”按钮，用于删除对应的用户。同时，我们还添加了一个分页导航条，用于控制展示数据的页数。在分页导航条中，我们使用了一个名为 currentPage、一个名为 numPages 和一个名为 pages 的变量来控制当前页数和总页数，并且将 currentPage 和 numPages 绑定在导航条上方，以方便用户查看当前页数和总页数。
2. AngularJS 控制器
接下来，我们需要在 AngularJS 控制器中绑定必要的事件和变量，以便可以实现 Ajax 获取数据、分页展示和删除操作。
----------------------- ---
----------------------- ---------------- ------ -
------------ - ---
------------------ - --
--------------- - --
------------ - ---
----------------------------------------------- -
------------ - --------------------
--------------- - ----------------------------- - ---
------------ - ---------------------------------- --- -- -- - - ---
------------------------ -
-------------------
---
-------------- - -------------- -
------------------ - -----
--
--------------- - ---------- -
-- ------------------- - -- -
------------------ -- --
-
--
--------------- - ---------- -
-- ------------------- - ---------------- -
------------------ -- --
-
--
----------------- - ------------ -
-------------------------------------------------------- -
------------ - ------------------------ -- ------- --- ----
--------------- - ----------------------------- - ---
------------ - ---------------------------------- --- -- -- - - ---
------------------------ -
-------------------
---
--
---在上面的代码中，我们创建了一个名为 UserCtrl 的 AngularJS 控制器，并绑定了一个名为 $scope 的作用域对象。在这个作用域对象中，我们定义了一些必须的变量和方法，用于实现 Ajax 获取数据、分页展示和删除操作。
在获取数据时，我们使用 $http.get() 方法向服务器发送 HTTP GET 请求，并通过 Promise 对象来处理服务器的响应。在获取到服务器返回的用户列表数据后，我们将数据存储在 $scope.users 变量中，并通过 $scope.numPages 和 $scope.pages 变量计算出总页数和分页数据。
在展示数据时，我们使用 ng-repeat 指令对用户列表进行迭代，并将用户数据展示在表格中。
在分页导航条中，我们使用 ng-repeat 指令对当前页数和总页数进行迭代，并将每一页码绑定到表格中。同时，我们还定义了一个名为 setPage() 的方法，用于设置当前页数。当用户点击“Next”或“Previous”按钮时，会调用 $scope.prevPage() 和 $scope.nextPage() 方法，并更新当前页数和 $scope.users 变量，以更新表格和分页导航条中的数据。
在删除操作时，我们使用 $http.delete() 方法向服务器发送 HTTP DELETE 请求，并通过 Promise 对象来处理服务器的响应。在成功删除用户数据后，我们从 $scope.users 变量中删除对应的用户，并重新计算总页数和分页数据，并更新表格和分页导航条中的数据。
总结
在本文中，我们介绍了如何使用 AngularJS 简化 Ajax 获取数据并实现数据分页。首先，我们介绍了 AngularJS 的基本概念和 Ajax 技术的原理。然后，我们通过一个实际的示例演示了如何使用 AngularJS 控制器来展示数据，并实现了分页展示和删除操作。通过本文的学习，你可以更加深入地理解 AngularJS 和 Ajax 技术，并且使用 AngularJS 来构建更加优秀的 Web 应用程序。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6653f77cd3423812e4888a51