$http GET 刷新页面答案

【问题标题】：$http GET refresh page$http GET 刷新页面
【发布时间】：2016-12-18 15:18:48
【问题描述】：

我正在做一个项目，我是 html、css、javascript 和 angular 的初学者。我使用来自电影网站的 API，它们的数据是 json 格式并按页面排序

    {
"page": 1,
"results": [
{
"poster_path": "/1yeVJox3rjo2jBKrrihIMj7uoS9.jpg",
"popularity": 14.31312,
"id": 1396,
"backdrop_path": "/eSzpy96DwBujGFj0xMbXBcGcfxX.jpg",
"vote_average": 8,
"overview": "Breaking Bad is an American crime drama television series created and produced by Vince Gilligan. Set and produced in Albuquerque, New Mexico, Breaking Bad is the story of Walter White, a struggling high school chemistry teacher who is diagnosed with inoperable lung cancer at the beginning of the series. He turns to a life of crime, producing and selling methamphetamine, in order to secure his family's financial future before he dies, teaming with his former student, Jesse Pinkman. Heavily serialized, the series is known for positioning its characters in seemingly inextricable corners and has been labeled a contemporary western by its creator.",
"first_air_date": "2008-01-19",
"origin_country": [
"US"
],
"genre_ids": [
18
],
"original_language": "en",
"vote_count": 858,
"name": "Breaking Bad",
"original_name": "Breaking Bad"
},

我已设法在屏幕上列出电视节目，但由于页面变量，我遇到了问题。当我使用 $http.get 时，我使用此 url https://api.themoviedb.org/3/tv/top_rated?api_key=ap_key&language=en-US&page=1，如何更改页面和自动刷新页面，以便在按钮单击时显示第二页。

        Mpage=1;
        TVpage=1;

        nextM = function(){Mpage++;}

         $http.get('https://api.themoviedb.org/3/movie/popular?api_key=040eb2b1bb7d1697319a08872e2578cb&page='+Mpage)
         .success(function(data) {
         $scope.Mresults = data.results;
         })


         $http.get('https://api.themoviedb.org/3/tv/popular?api_key=040eb2b1bb7d1697319a08872e2578cb&page='+TVpage)
         .success(function(data) {
         $scope.TVresults = data.results;
         })

【问题讨论】：

首先不要混合使用 jquery 和 angular，除非你真的知道自己在做什么，并且必须使用 jquery 插件来实现 angular 模块中不可用的功能。您可以使用许多可用于 Angular 的分页模块

标签： javascript html angularjs get

【解决方案1】：

请检查随附的 sn-p。它应该让您了解如何实现这一目标。

PS：sn-p 不会运行，因为我没有执行 angular 指令。但是一个简单的 jquery sn-p 可以让您了解如何使其工作。

$(function(){
  _pagination.initialize();
});

var _pagination = {
  initialize: function(){
    $('.pagination').on('click', function(){
      var page = $(this).attr('id').split('_')[2];
      _pagination.getPageData(page);
    });
  },
  getPageData: function(page){
     $http.get('https://api.themoviedb.org/3/movie/popular?api_key=040eb2b1bb7d1697319a08872e2578cb&page='+page)
         .success(function(data) {
         $scope.Mresults = data.results;
         })
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button type="button" id="pagination_btn_1" class="pagination">1</button>
<button type="button" id="pagination_btn_2" class="pagination">2</button>
<button type="button" id="pagination_btn_3" class="pagination">3</button>
<button type="button" id="pagination_btn_4" class="pagination">4</button>
<button type="button" id="pagination_btn_5" class="pagination">5</button>

【讨论】：