angularjs数据请求、分页问题

最新推荐文章于 2022-01-10 11:04:08 发布

原创最新推荐文章于 2022-01-10 11:04:08 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#angularjs

java 专栏收录该内容

10 篇文章

订阅专栏

本文介绍如何解决AngularJS中tm.pagination插件在请求数据时出现的问题，并提供了一种有效的处理方式。通过监听页码和每页显示条数的变化来触发数据请求，确保了数据加载的效率和用户体验。

<tm-pagination conf="paginationConf"></tm-pagination>

<script src="../lib/angularjs/1.2.22/angular.min.js"></script>
<script src="../src/pagination/tm.pagination.js"></script>

这个是我引用他人的分页插件的，由于在请求数据方面出现问题，所以做了变动

原创：https://www.miaoyueyue.com/archives/833.html

下面是我的处理方式：

<script type="text/javascript">
    var app = angular.module('dataHall', ['tm.pagination']);
    app.controller('dataHallCtrl', ['$scope', '$http', function ($scope, $http) {
        //配置分页基本参数
        $scope.paginationConf = {
            currentPage: 1,
            itemsPerPage: 5
        };
        ////isloading ==1:加载数据2:查询不到数据3:查询到数据
        $scope.isloading = function (isloading) {
            if (isloading == 1) {
                $(".loading").show();
                $("#noneData").hide();
            } else if (isloading == 2) {
                $(".loading").hide();
                $("#noneData").show();
            } else {
                $(".loading").hide();
                $("#noneData").hide();
                $(".datainit").show();
            }
        };
        var GetAllEmployee = function () {
            var postData = {
                pageNo: $scope.paginationConf.currentPage,
                pageSize: $scope.paginationConf.itemsPerPage
            };
            $http({
                url: "yoururl",
                method: 'post',
                params: postData
            }).success(function (response) {
                $scope.paginationConf.totalItems = response.value.count;
                $scope.data = response.value.list;
                if (!$scope.data) {
                   // $scope.isloading(2);
                } else {
                   // $scope.isloading(3);

                }
            });
        };
        /***************************************************************
         当页码和页面记录数发生变化时监控后台查询
         如果把currentPage和itemsPerPage分开监控的话则会触发两次后台事件。
         ***************************************************************/
        $scope.$watch('paginationConf.currentPage + paginationConf.itemsPerPage', GetAllEmployee);
    }]);

</script>

其他的处理方式：

AngularJS 的POST请求默认Content-Type是”application/json”,并不是表单形式的”application/x-www-form-urlencoded”提交，服务端接收到的是对象，而不是字段，当然对于RESTful接口来说，正好需要对象，SpringMVC通过@RequestBody注解就可以得到相应对象，很是方便。

如果需要使用传统方式，可以设置Content-Type

$http.post('/login/in', $.param({username: $scope.username, password: $scope.password}),
        {headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'}})
        .then(function (response) {
            if (response.data.success) {
                console.log("登录成功");
            } else {
                console.log(response.data.msg);
            }
        });

$.param是JQuery方法，将js对象转成username=username&password=password形式