那些遇到过的问题

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

Fgb*_*nch 24 javascript pagination facebook facebook-graph-api

我正在尝试使用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); ??      

      }
Run Code Online (Sandbox Code Playgroud)

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

Nis*_*ant 32

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

第一:我发现你无法真正从第一页进入"上一页"页面.理想情况下,我应该.所以,这是我提交的您可能想要遵循的错误: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>
Run Code Online (Sandbox Code Playgroud)

回应:

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
Run Code Online (Sandbox Code Playgroud)

示例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>
Run Code Online (Sandbox Code Playgroud)

回应:

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
Run Code Online (Sandbox Code Playgroud)

实施例3:执行:第1页- >第2页- >第1页或页- >下一个- >前面的下面的代码将加载第1页,然后进入"下一个"页(第2页),然后再回到第1页,使用"上一个"

<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>
Run Code Online (Sandbox Code Playgroud)

回应:

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
Run Code Online (Sandbox Code Playgroud)

老答复

使用limit,offset,since和until参数,以实现自己的目标.

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

分页

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

以下应该从消息开始last week直到所有帖子(基本上,每页10个消息的第三页分页).yesterday21st - 30th

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

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

https://graph.facebook.com/me/home?access_token=[AUTH_TOKEN]&since=1296626400&limit=4
Run Code Online (Sandbox Code Playgroud)

它返回数据,另外还返回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"
   }
}
Run Code Online (Sandbox Code Playgroud)

您可以安全地使用previous和nextJSON对象的属性跳转到下一个页面(或前一页).这似乎是最简单的方法.

顺便说一句,\u00257C需要转换为|使其工作.

  • 那些从Google到达这里的人有同样的问题怎么样？答案与问题不符,没有长期价值. (15认同)
  • 我从谷歌来到这里,这个答案没有回答我的问题 (7认同)
  • 我想你没有回答海报问题.他说:"但我在上一页获得了一个URL,我不知道如何从该URL进行javascript FB.api调用". (5认同)
  • @BangDao https://developers.facebook.com/docs/reference/api/pagination/显示了三种类型的分页.我已经验证你可以使用基于光标分页的`limit`.此外,医生说他们也支持`offset`.我会检查一下.我不希望他们有过时的文档. (2认同)

Cra*_*les 7

如果您只是想获取下一页(使用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);
        });
    } 
}
Run Code Online (Sandbox Code Playgroud)

归档时间：

查看次数：

29985 次

最近记录：

8 年，6 月 前
没有嵌套的FB.api分页 3
更多相关链接
相关归档
如何强制客户端刷新JavaScript文件？ 570
在JavaScript中2个日期之间的差异？ 496
受污染的画布可能无法出口 158
使用此查询实现分页(跳过/获取)功能 118
由于JavaScript是单线程的,HTML5中的Web worker如何进行多线程处理？ 56
使用jquery删除具有给定id的所有元素 45
通过swift整合新的facebook SDK 29
React-native app和Facebook SDK 4
MatSort 和 MatPaginator 在没有 setTimeOut 的情况下不起作用 4
获取Facebook页面/个人资料网址 1
难疑归档
如何确定最初克隆本地Git存储库的URL？ 3782
是否可以将CSS应用于角色的一半？ 2717
为什么我的JavaScript在所请求的资源上出现"No'Access-Control-Allow-Origin'标头"错误,当Postman没有？ 2320
设置JavaScript函数的默认参数值 2277
从C#中的枚举中获取int值 1698
当键盘出现时 - 如何开始编辑时,如何让UITextField向上移动？ 1674
从客户端检测到潜在危险的Request.Form值 1437
在Python中检查类型的规范方法是什么？ 1171
如何在滚动后检查元素是否可见？ 1115
Access-Control-Allow-Origin标头如何工作？ 1050