从包含页面的 jsonp api 中检索数据答案

【问题标题】：retrieving data from jsonp api that contains pages从包含页面的 jsonp api 中检索数据
【发布时间】：2017-01-09 06:33:31
【问题描述】：

当数据在页面中拆分时，我对如何从 jsonp api 检索所有数据有点困惑。回调如下所示：

{
entries: [],
page: 1,
pages: 101,
posts: 10054
}

下面的代码只能从第 1 页获取结果，但我想从所有 101 页获取结果。如果我向 url 添加一个查询，例如：&page=2 或 &page=3 我只能从该页面访问对象，我想要的是一次访问所有页面中的所有对象...... 将不胜感激一些帮助:)

$.getJSON('http://hotell.difi.no/api/jsonp/mattilsynet/smilefjes/tilsyn?callback=?', function(data){

var html = "";

$.each(data.entries, function(key,value){
    html += '<p>' + value.navn + '</p>';
})

$('#test').html(html);

})

【问题讨论】：

标签： javascript jquery json jsonp

【解决方案1】：

您可以第一次调用以获取页数，然后在下一次调用中您可以循环浏览它们。试试下面的代码

$.getJSON('http://hotell.difi.no/api/jsonp/mattilsynet/smilefjes/tilsyn?callback=?', function(data) {
  var pages = data.pages;
  for (var i = 1; i <= data.pages; i++) {
    $.getJSON('http://hotell.difi.no/api/jsonp/mattilsynet/smilefjes/tilsyn?callback=?&page=' + i, function(data) {

      $('#test').append("Page " + data.page + " Data >> ");

      var html = "";
      $.each(data.entries, function(key, value) {
        html += '<p>' + value.navn + '</p>';
      })
      $('#test').append(html);
    });
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test">
</div>

【讨论】：

【解决方案2】：

您可以使用 $.ajax() 而非 $.getJSON() 来使用 jsonp。你必须在你的javascript代码中声明你的回调方法

$("#btn").click(function(){
$.ajax({
        url: "http://hotell.difi.no/api/jsonp/mattilsynet/smilefjes/tilsyn?callback=myJsonpCallbackMethod",
        dataType: "jsonp",
        success: function( response ) {
            //console.log( response ); // server response
        }
    });
});

function myJsonpCallbackMethod(data){
  alert("Hello");
  console.log( data ); // server response
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<button id="btn">Click Me</button>

【讨论】：

感谢您的回答:)