我正在使用 themoviedb API 获得 ajax 响应。我想调用我的函数,每次调用该函数时,该函数都会使用不同的页码获取 API 响应。
我已经设法获取数据,并且可以在成功函数中记录正确的 url。但是,调用的 json 不会使用新的页码更新,它始终是页面加载时调用的第一个。我是否缺少一些使用更新后的 url 正确重新初始化 ajax 调用的功能?
这是控制器:
angular.module('MovieApp', [])
.controller("MovieAppCtrl",
[
'$http', '$scope',
function($http, $scope) {
$scope.MovieData = [];
$scope.Search = null;
$scope.Key = '01b2f34add226a588438bf6e49b953d5';
$scope.GetMoviesData = function(number) {
try {
$http({
url: 'https://api.themoviedb.org/3/movie/popular?api_key='+$scope.Key+'&page="'+number+'"',
method: "GET",
}).then(
function(payload) {
$scope.MovieData = payload.data;
console.log($scope.MovieData);
console.log('https://api.themoviedb.org/3/movie/popular?api_key='+$scope.Key+'&page='+number+'');
},
function(){
alert("Something is wrong. Please try again.");
});
} catch (error) {
alert("Exception occured while fetching movie data.");
}
}
}
]);
angular.element(function() {
angular.bootstrap(document, ['MovieApp']);
});
这里,数字代表添加到 url 路径的页码:像这样: https ://api.themoviedb.org/3/movie/popular?api_key=01b2f34add226a588438bf6e49b953d5&page=2
标记:
<div ng-controller='MovieAppCtrl'>
<div class="album">
<div class="container">
<div class="clearfix row">
<a ng-repeat="movie in MovieData.results | limitTo:100" class="video-list col-md-4" target="_blank" ng-href="">
<div class="card mb-4 box-shadow">
<img ng-src="https://image.tmdb.org/t/p/w185_and_h278_bestv2/{{movie.poster_path}}" title="{{movie.title}}" alt="{{movie.title}}" class="card-img-top">
<div class="card-body">
<h5 class="">{{movie.title}}</h5>
<span>Rating: {{movie.vote_average}}</span><br>
<span>Votes: {{movie.vote_count}}</span>
</div>
</div>
</a>
</div>
<div class="pagination check-element m-show-hide ng-hide" ng-show="checked">
<p class="left">You're on page: 1 of 5 <span class="total_results">(100 resultat)</span></p>
<p class="right pagination">
<span ng-click="GetMoviesData(1)">
<span class="page1">1</span>
</span>
<span ng-click="GetMoviesData(2)">
<span class="page2">2</span>
</span>
<span ng-click="GetMoviesData(3)">
<span class="page3">3</span>
</span>
<span ng-click="GetMoviesData(4)">
<span class="page4">4</span>
</span>
<span ng-click="GetMoviesData(5)">
<span class="page5">5</span>
</span>
</p>
</div>
</div>
</div> <!-- album END -->
</div>
这里 GetMoviesData(1) 将页码发送给函数以调用 API 路径的正确页面。
我错过了什么?