AngularJs动态更新$http方法的URL

AngularJs updating the URL for $http method dynamically

本文关键字：方法 URL http 动态 更新 AngularJs      更新时间：2023-09-26

所以我正在尝试在Angular中进行无限滚动。我想在我的页面上显示的数据项由第三方API提供，URL看起来像：

http://example.com/item/data/?param=item&页面大小＝100&第1页

现在，我使用$http对服务器进行了一次成功的ajax调用，并创建了一个指令，在滚动时将从url加载更多的Items。但我无法更新URL，一旦我开始滚动，我就会希望我的URL变成：

http://example.com/item/data/?param=item&页面大小＝100&第1页
http://example.com/item/data/?param=item&页面大小＝100&第2页
http://example.com/item/data/?param=item&页面大小＝100&第3页
http://example.com/item/data/?param=item&页面大小＝100&第4页
……

然而，每当我滚动URL时，它就会变成：http://example.com/item/data/?param=item&页面大小＝100&第1页
http://example.com/item/data/?param=item&页面大小＝100&第1页
http://example.com/item/data/?param=item&页面大小＝100&第1页
http://example.com/item/data/?param=item&页面大小＝100&page=1

这意味着页面参数永远不会更新，或者即使是Shttp也永远不会正确执行它。有人能告诉我如何更新$http中的URL参数，该参数从第三方API获取数据。

代码大致如下：

var page = 1;
        var url = 'http://example.com/item/data/?param=item&pagesize=100&page=' + page;
        $http.get(url)
            .success(function(data, status, config, headers) {
                $scope.page = 1;
                for (var i = 0; i < data.items.length; i++) {
                    $scope.totalTags = data.items;
                    $scope.page += 1;
                }
            $scope.loading = false; 
        })
            .error...//rest of the stuff

代码中的几个问题：

  • var-page和$scope.page是两个不同的变量；你使用前者来选择$http请求中的页面，但从不递增。这就是为什么你总是得到页面1
  • 您的循环不能执行您希望它执行的操作：您将数据替换一百次，而不是将新数据附加到现有集，并且您将$scope.page增加一百次而不是一次（但您不使用$scope.page，因此它不会执行任何操作，尤其是因为每次检索数据时都将其放回1）

请尝试以下代码片段：

$scope.page = 1;
var url = 'http://example.com/item/data/?param=item&pagesize=100&page=' + $scope.page;
$http.get(url)
    .success(function(data, status, config, headers) {
        for (var i = 0; i < data.items.length; i++) {
            $scope.totalTags.push(data.items[i]);
        }
        $scope.page += 1;
        $scope.loading = false; 
    })
    .error...//rest of the stuff

按照函数允许的方式分离url和参数，然后可以更容易地更改参数。

 var url="http://example.com/item/data/";
 var params = {
    param:"item",
    pagesize:199,
    page:page
 };
 params.page = 2;
 $.get(url,params,function(data){});
相关文章：