堆栈内存溢出
  繁体   English   中英

如何在facebook javascript API中进行分页？

[英]How does paging in facebook javascript API work?

 原文  2011-02-17 00:13:56  8   5    javascript/ facebook/ facebook-graph-api/ pagination

问题描述

我正在尝试使用javascript sdk恢复我的facebook新闻Feed中的上周帖子。 我能够获得第一页，但后来，我不知道如何继续迭代其他页面。 我用以下代码尝试过： 

 $('#loadPosts').bind('click', function() {     
            FB.api('/me/home',{since:'last week'}, getPosts);   
          });

 getPosts = function(response){
        for (element in response.data){
            post = response.data[element]
            console.log(post);          
          }

          previousPage = response.paging.previous;        
          console.log(previousPage);

          // can i call FB.api(previousPage, getPosts); ??      

      }

但我得到一个URL作为上一页，我不知道如何从该URL进行javascript FB.api调用。 有任何想法吗？

5 个解决方案

解决方案1
 32 已采纳  2011-02-18 11:21:23

好吧，对于一个简单的问题似乎有很多抱怨，我仍然相信我的旧答案澄清了。 无论如何，让我照顾你。 :)

第一 ：我发现你无法真正从第一页进入“上一页”页面。 理想情况下，我应该。 所以，这是我提交的您可能想要遵循的错误： https ： //developers.facebook.com/bugs/391562790938294？浏览= search_50fcac3ce094e7068176315

第二 ：如果这是由设计，你不能从第一页就又回到“以前”（因为没有以前的），但是你一定能够进入“下一步”。 但是，由于API表现为游标，并且您已向前移动，现在您的“上一页”页面将起作用。

问题的答案：
我正在获取一个URL作为上一页，我不知道如何从该URL进行javascript FB.api调用。 有任何想法吗？

是的，你可以拨打FB.api电话。 但我建议你改为进行HTTP GET调用，因为它更容易。 另请注意，之前可能返回并清空数组{"data":[]}

如何获得上一页/下一页？
在这里，我正在编写一个使用jQuery的小代码。 如果您不想阅读代码，有两种方法：

  1. 使用上一个/下一个URL并发出HTTP GET请求。 哪个，如果不是空的，将带有下一组“上一个”，“下一个”链接。
  2. 解析URL，并将查询字符串作为JSON传递给FB.api 。 我使用jQuery BBQ pluging进行解析。

重要说明：在示例中，我使用的是“下一个”URL，因为在第一个请求中，如果我使用“previous”，它会提供空的JSON而不是过去的帖子。 但是，一旦我向前移动几页，我就可以使用“之前的”URL。 与谷歌搜索结果一样，您不能在第1页上使用上一页，但您可以从任何页面> 1（参见下面的示例3）。 这称为分页。

示例1：使用HTTP GET的代码（首选）:(我将加载3个帖子/页面并查看3个下一页） 

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript" src="https://raw.github.com/cowboy/jquery-bbq/master/jquery.ba-bbq.min.js"></script>
<script>

var i =0;
var getPosts = function (response){
          for (element in response.data){
            post = response.data[element]
            console.log(post.id + ": " +post.message);          
          }



          // can i call FB.api(nextPage, getPosts); ??
          if(i < 2){
              nextPage = response.paging.next;        
              console.log(nextPage);
              i++;
              //Method 1: I use it.
              $.get(nextPage, getPosts, "json"); //optional: $.getJSON can be use instead
          }

      }

$(document).ready(function(){

$('#loadPosts').bind('click', function() {
            FB.api('/me/home',{since:'yesterday','limit': '3'}, getPosts);   
          });
})
</script>
</head>
<body>
<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    // init the FB JS SDK
    FB.init({
      appId      : 'XXXXXXXXXXXX', // FILL YOUR APP ID HERE!
      status     : true, // check the login status upon init?
      cookie     : true, // set sessions cookies to allow your server to access the session?
    });

    // Additional initialization code such as adding Event Listeners goes here

  };
</script>
<button id="loadPosts">Load Posts</button>
<p>Please open developer console to see what's happening. In Firefox, you can use ctrl+shift+k, and in Chrome/Chromium use ctrl+shift+i</p>
</body>
</html>

回应 ： 

100004192352945_156620584487686: undefined
137723270230_10152423499430231: On this day, please spare a thought for those fellow citizens, for whom I just spare a thought and do nothing else.
642965867_10151211036740868: Thanks everyone for their wishes! The wishes made my day!

https://graph.facebook.com/677811901/home?limit=3&access_token=AAACYjXGS5FQBAIR3brc2LibjBcZCi2kRJUybG8VMaaJSZARQ8SzNE7BE4PBrDIFVZB0AaVEa1dZCpX1fhCvoD2rnq8uc8OGaIFhO9uvVXAZDZD&until=1359184568
367116489976035_536776529676696: Rage. Quit. Life.
899605553_10152450871820554: undefined
367116489976035_417820828298092: undefined

https://graph.facebook.com/677811901/home?limit=3&access_token=AAACYjXGS5FQBAIR3brc2LibjBcZCi2kRJUybG8VMaaJSZARQ8SzNE7BE4PBrDIFVZB0AaVEa1dZCpX1fhCvoD2rnq8uc8OGaIFhO9uvVXAZDZD&until=1359179890
137723270230_10152423148745231: Pratibha Patil used to love the Republic Day Parade, especially the part where the visiting Chief Guest extended her an invitation to visit his/her own country.
137723270230_10152423131700231: The Kingfisher tableau at Republic Day Parade was so simple. Vijay Mallya riding a bicycle.
367116489976035_484460034950769: undefined

示例2：使用FB.api的代码:(我将加载3个帖子/页面并查看3个下一页） 

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript" src="https://raw.github.com/cowboy/jquery-bbq/master/jquery.ba-bbq.min.js"></script>
<script>

var i =0;
var getPosts = function (response){
          for (element in response.data){
            post = response.data[element]
            console.log(post.id + ": " +post.message);          
          }



          // can i call FB.api(nextPage, getPosts); ??
          if(i < 2){
              nextPage = response.paging.next;        
              console.log(nextPage);
              i++;

              //Method 2: If you have to call FB.api
              var params = jQuery.deparam.querystring(nextPage);
              console.log(JSON.stringify(params, null, 2));
              FB.api('/me/home', params, getPosts)
          }

      }

$(document).ready(function(){

$('#loadPosts').bind('click', function() {
            FB.api('/me/home',{since:'yesterday','limit': '3'}, getPosts);   
          });
})
</script>
</head>
<body>
<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    // init the FB JS SDK
    FB.init({
      appId      : 'XXXXXXXXXXXX', // FILL YOUR APP ID HERE!
      status     : true, // check the login status upon init?
      cookie     : true, // set sessions cookies to allow your server to access the session?
    });

    // Additional initialization code such as adding Event Listeners goes here

  };
</script>
<button id="loadPosts">Load Posts</button>
<p>Please open developer console to see what's happening. In Firefox, you can use ctrl+shift+k, and in Chrome/Chromium use ctrl+shift+i</p>
</body>
</html>

回应 ： 

367116489976035_536776529676696: Rage. Quit. Life.
899605553_10152450871820554: undefined
367116489976035_417820828298092: undefined
{
  "limit": "3",
  "access_token": "AAACYjXGS5FQBAIR3brc2LibjBcZCi2kRJUybG8VMaaJSZARQ8SzNE7BE4PBrDIFVZB0AaVEa1dZCpX1fhCvoD2rnq8uc8OGaIFhO9uvVXAZDZD",
  "until": "1359179890"
}

137723270230_10152423148745231: Pratibha Patil used to love the Republic Day Parade, especially the part where the visiting Chief Guest extended her an invitation to visit his/her own country.
137723270230_10152423131700231: The Kingfisher tableau at Republic Day Parade was so simple. Vijay Mallya riding a bicycle.
367116489976035_484460034950769: undefined

https://graph.facebook.com/677811901/home?limit=3&access_token=AAACYjXGS5FQBAIR3brc2LibjBcZCi2kRJUybG8VMaaJSZARQ8SzNE7BE4PBrDIFVZB0AaVEa1dZCpX1fhCvoD2rnq8uc8OGaIFhO9uvVXAZDZD&until=1359178140
{
  "limit": "3",
  "access_token": "AAACYjXGS5FQBAIR3brc2LibjBcZCi2kRJUybG8VMaaJSZARQ8SzNE7BE4PBrDIFVZB0AaVEa1dZCpX1fhCvoD2rnq8uc8OGaIFhO9uvVXAZDZD",
  "until": "1359178140"
}
655515199_403590309726450: a good resolution to take on Republic Day
505588854_496901583686790: Love the secret world that slow motion reveals.
693811975_10151217837201976: undefined

示例3：执行：page1 - > page2 - > page1或page - > next - > previous以下代码将加载page1，然后转到“next”页面（page2），然后返回page1，使用“previous” 

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript" src="https://raw.github.com/cowboy/jquery-bbq/master/jquery.ba-bbq.min.js"></script>
<script>

var i =0;
var getPosts = function (response){
          for (element in response.data){
            post = response.data[element]
            console.log(post.id + ": " +post.message);          
          }



          // can i call FB.api(nextPage, getPosts); ??
          if(i < 2){
              nextPage = response.paging.next;        
              if(i==1)
                nextPage = response.paging.previous;

              console.log(nextPage);
              i++;
              $.get(nextPage, getPosts, "json"); //optional: $.getJSON can be use instead
          }

      }

$(document).ready(function(){

$('#loadPosts').bind('click', function() {
            FB.api('/me/home',{since:'yesterday','limit': '3'}, getPosts);   
          });
})
</script>
</head>
<body>
<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    // init the FB JS SDK
    FB.init({
      appId      : 'XXXXXXXXXXXX', // FILL YOUR APP ID HERE!
      status     : true, // check the login status upon init?
      cookie     : true, // set sessions cookies to allow your server to access the session?
    });

    // Additional initialization code such as adding Event Listeners goes here

  };
</script>
<button id="loadPosts">Load Posts</button>
<p>Please open developer console to see what's happening. In Firefox, you can use ctrl+shift+k, and in Chrome/Chromium use ctrl+shift+i</p>
</body>
</html>

回应 ： 

PAGE1:
367116489976035_536806916340324: How big is the Solar System?
Full infographic here: http://bit.ly/WmzfVn
137723270230_10152423534790231: "Sociologist" Ashis Nandy has claimed that most of the corrupt came from OBC/SC/ST castes.
Following this, Corrupt people have strongly condemned Nandy's attempts to divide them on caste lines. They'll be united in loot, forever.
100004192352945_156620584487686: undefined

PAGE2:
https://graph.facebook.com/677811901/home?limit=3&access_token=AAACYjXGS5FQBAKqIMyCVYjH9upK4e2bjUwLoVbbFDL0ffc0SZBTVR9MUFGV4ZCq6HBdFIadFMpLDC3ATMZCJ4GPsXWpG4qTGODavuvzLAZDZD&until=1359185659

137723270230_10152423499430231: On this day, please spare a thought for those fellow citizens, for whom I just spare a thought and do nothing else.
642965867_10151211036740868: Thanks everyone for their wishes! The wishes made my day!
367116489976035_536776529676696: Rage. Quit. Life.

PAGE1:
https://graph.facebook.com/677811901/home?limit=3&access_token=AAACYjXGS5FQBAKqIMyCVYjH9upK4e2bjUwLoVbbFDL0ffc0SZBTVR9MUFGV4ZCq6HBdFIadFMpLDC3ATMZCJ4GPsXWpG4qTGODavuvzLAZDZD&since=1359185123&__previous=1

367116489976035_536806916340324: How big is the Solar System?
Full infographic here: http://bit.ly/WmzfVn
137723270230_10152423534790231: "Sociologist" Ashis Nandy has claimed that most of the corrupt came from OBC/SC/ST castes.
Following this, Corrupt people have strongly condemned Nandy's attempts to divide them on caste lines. They'll be united in loot, forever.
100004192352945_156620584487686: undefined

老答复

使用limit ， offset ， since和until参数来实现您的目标。

参考： http ： //developers.facebook.com/docs/reference/api/

分页

查询连接时，有几个有用的参数可用于筛​​选和翻页连接数据：

以下内容应该是自last week以来的所有帖子，直到yesterday从21st - 30th到21st - 30th消息（基本上，每页10个消息的第三页分页）。 

 FB.api(
  '/me/home',
  {
    'since':'last week',
    'limit': '10',
    'offset': '20',
    'until': 'yesterday'
  }, 
  getPosts
);

我刚刚测试过，它有效。 我使用limit = 4，这是页面大小的东西。 所以，当我从2011年2月2日（Unix时间戳：1296626400）获取数据到今天使用这个 

https://graph.facebook.com/me/home?access_token=[AUTH_TOKEN]&since=1296626400&limit=4

它返回数据，另外还返回URL以转到下一页 

{
   "data": [
      <ARRAY OF POSTS HERE>
   ],
   "paging": {
      "previous": "https://graph.facebook.com/me/home?access_token=[NEW_AUTH_TOKEN]&since=1298026753&limit=4",
      "next": "https://graph.facebook.com/me/home?access_token=[NEW_AUTH_TOKEN]&limit=4&until=1298023222"
   }
}

您可以安全地使用JSON对象的previous和next属性跳转到下一页（或上一页）。 这似乎是最简单的方法。

顺便说一句， \%7C需要转换为| 让这个工作。

解决方案2
 7  2012-08-30 04:19:43

如果您只是想获取下一页（使用paging.next对象），您可以执行jQuery.getJSON请求。 类似于以下内容： 

function loadAlbums(){
    FB.api('/me/albums', function(response){
        handleAlbumsResponse(response);
    });
}

function handleAlbumsResponse(response){
    var albums = response.data;

    for( var i in albums){
        var album = albums[i];
        $('#albums ul').append('<li><a href="#">' + album.name + '</a></li>');
    }

    if( response.paging.next){
        console.log('fetching next page...');
        $.getJSON(response.paging.next, function(response){                
            handleAlbumsResponse(response);
        });
    } 
}

解决方案3
 3  2012-04-28 00:58:04

您问题中的关键约束是我们无法使用响应中提供的“下一个”网址。

我会首先回答一个更一般的问题，试着回答你的问题：

我们如何为我们的Facebook应用程序创建用户体验，其中每次调用更多项目都返回相同数量的项目。

如果用户请求“更多”并获得10个项目，按“更多”然后获得4，然后是7等，她可能会认为我们的应用程序有问题。

在Open Graph intro页面上 ，引入了不同的分页参数。 这些是：

限制

抵消

直到

以来

如'paging'标题下所述。 但是，如果我们实现一个带限制和偏移的解决方案，我们增加偏移量，例如： 

https://graph.facebook.com/me/home?limit=10&offset=OFFSET

如果OFFSET将增加每个请求的限制，我们发现返回的结果数有时不等于我们指定的“limit”参数。 这是因为在检查查询结果是否对查看者可见之前，参数应用于Facebook侧。 我们要求10，但我们可能得到8项作为回报。

这意味着如果我们希望我们的应用程序的“更多”请求始终返回相同数量的项目，我们就无法使用我们增加限制和抵消的解决方案。

Jeff Bowen（曾在Facebook平台团队工作）在本博客中提出的解决方案是这样的逻辑：

  • 请求项目，限制= YOUR_LIMIT。
  • 检索响应中最后一项的created_time字段。
  • 请求next = RETRIEVED_CREATED_TIME并且limit = YOUR_LIMIT

这是一个代码示例，基于上面提到的博客文章中的示例： 

var graphURL = "https://graph.facebook.com/me/home?" +
                 "callback=processResult&" +
                 "date_format=U&" +
                 "limit=10";

function loadPosts() {
  var script = document.createElement("script");
  script.src = graphURL;
  document.body.appendChild(script);
}

function processResult(posts) {
  if (posts.data.length == 0) {
    document.getElementById("loadMore").innerHTML =
      "No more results";
  }
  else {
    graphURL = graphURL + "&until=" +
      posts.data[posts.data.length-1].created_time;

    for (var post in posts.data) {
      var message = document.createElement("div");
      message.innerHTML = posts.data[post].message;
      document.getElementById("content").appendChild(message);
    }
  }
}

此解决方案按时间顺序从用户的新闻源中检索接下来的10个项目，而不使用JSON响应中的URL。

解决方案4
 0  2016-07-06 12:32:18

它正在发挥作用 

    function friends_list()
    {

        for (var x = 0; x<500; x++)
        {
            FB.api(
            '/me/friendlists/',
            'GET',
            {"fields":"id","offset":x},
            function(response) {
            for (i = 0; i < response.data.length; i++) 
            { 

            document.getElementById("friends_list").innerHTML =  
            document.getElementById("friends_list").innerHTML + "<br>" + response.data[i].id; 

            }
            document.getElementById("friends_list").innerHTML =  
            document.getElementById("friends_list").innerHTML + "<br>" ;
            }
            );
        }


    }

解决方案5
 0  2017-06-25 16:20:35

我注意到这个问题很老了。 这些天我的回答是真的FB jsSDK（2017）:)

实际上它比前辈描述的更简单，而且有点直观。 FB jsSDK它本身就是一个API，它可以通过自身和使用相同的方式浏览响应的页面，不是吗？ 

function getPosts(){
    FB.api('/me/posts', 'GET', {limit:250}, cbGetPosts);
}

function cbGetPosts(response){
    // do your stuff with response.data
    if(response && response.paging){
     FB.api(response.paging.next, cbGetPosts); // yep, is this simple
    }
}

显然，只要定义了下一个键但是证明了这个概念，这将要求下一页。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 `space` 分页在浏览器中是如何工作的？ Facebook Graph API 不起作用 为什么我的JavaScript在Facebook应用程序中不起作用？ Facebook JavaScript SDK不适用于Chrome扩展程序 Facebook Javascript与RoR集成不起作用 Facebook如何使用AJAX？ Facebook 发射器如何工作？ facebook javascript api不返回任何内容 API 如何工作？ &#39;this&#39; 在 JavaScript 中是如何工作的？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM