程序员经验分享-hwhale

Facebook javascript API 中的分页是如何工作的？

2024-04-17

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

 $('#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 调用。有任何想法吗？


好吧，似乎对一个简单的问题有很多抱怨，我仍然相信我的旧答案已经澄清了。不管怎样，让我来照顾你吧。 :)

First：我发现你不能真正从第一页转到“上一页”。理想情况下，我应该。因此，这是我提交的一个错误，您可能需要关注：https://developers.facebook.com/bugs/391562790938294?browse=search_50fcac3ce094e7068176315 https://developers.facebook.com/bugs/391562790938294?browse=search_50fcac3ce094e7068176315

Second：如果这是设计使然，则您无法从第一页返回到“上一页”（因为有is没有上一个），但您肯定可以转到“下一个”。然而，由于 API 的行为就像一个光标，并且您已经向前移动，现在您的“上一个”页面可以工作了。

问题的答案：
我得到了一个与上一页相同的 URL，但我不知道如何从该 URL 进行 javascript FB.api 调用。有任何想法吗？

是的，您可以进行 FB.api 调用。但我建议您改为进行 HTTP GET 调用，因为它更容易。另请注意，前一个可能会返回空数组，例如{"data":[]}

如何获取上一页/下一页？
在这里，我正在编写一段使用 jQuery 的小代码。如果你不想看代码，有两种方法：

  1. 使用上一个/下一个 URL 并发出 HTTP GET 请求。如果不为空，它将带有下一组“上一个”、“下一个”链接。
  2. 解析 URL，获取 JSON 格式的查询字符串并将其传递给FB.api。我用了jQuery 烧烤插件 http://benalman.com/code/projects/jquery-bbq/docs/files/jquery-ba-bbq-js.html#jQuery.deparam用于解析。

重要的提示：在示例中，我使用“下一个”URL，因为在第一个请求中，如果我使用“上一个”，它会给出空的 JSON，而不是给出过去的帖子。但是，一旦我向前移动了几页，我就可以使用“上一个”URL。与 Google 结果一样，您无法在第 1 页上转到上一页，但可以从任何 > 1 页（请参阅下面的示例 3）。这称为分页。

示例 1：使用 HTTP GET 的代码（首选）：（我将加载 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>

Response:

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 个帖子/页并查看下三个页面）

<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>

Response:

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，然后转到“下一页”(page2)，然后使用“上一页”返回到 page1

<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>

Response:

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

旧答案

Use limit, offset, since and until参数来实现您的目标。

Refer: http://developers.facebook.com/docs/reference/api/ http://developers.facebook.com/docs/reference/api/

Paging

查询连接时，有几个有用的参数可让您过滤和分页连接数据：

  • 限制、偏移量：https://graph.facebook.com/me/likes?limit=3 https://graph.facebook.com/me/likes?limit=3
  • 直到、自（unix 时间戳或 strtotime 接受的任何日期）：

以下内容应该获得自此以来的所有帖子last week until yesterday from 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"
   }
}

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

顺便一提，\u00257C需要转换为|让它发挥作用。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

facebook

facebookgraphapi

pagination

Facebook javascript API 中的分页是如何工作的？ 的相关文章

随机推荐

  • UIButton 在 iOS 5.x 中不起作用，在 iOS 6.x 中一切正常

    通过点击主 UIView 上的简单 UIButton 附加视图 子视图 会出现在屏幕中央 以编程方式创建的子视图 在该子视图上 我有 UIButton 启动 MPMoviePlayer 此代码位于创建子视图的方法内部 Create play

  • Hibernate注解@Where带参数

    我目前有此类产品 以这种方式注释 我正在使用软删除 SQLDelete sql UPDATE products SET active 0 WHERE id product and last modification date Where c

  • IE(11)CSS多列处理不当？

    我正在使用 CSS 多列构建 2 列布局 并且我想给出有关在何处断开列的提示 所以我说 columns 2在容器上 以及break before column在我想要休息的地方 IE 在我的例子中是 11 决定将我的内容分成 3 列并溢出到

  • 使用条件对向量进行子集化（不包括 NA）

    vector1 c 1 2 3 NA condition1 vector1 2 vector1 condition1 vector1 condition1 TRUE 在上面的代码中 条件1是 FALSE TRUE FALSE NA 第三行和

  • 在执行器服务中实现线程超时

    所以现在我有一个相当基本的执行器服务 我用它来将程序分解为线程 如下所示 ExecutorService threadPool Executors newFixedThreadPool 12 for int i 0 i lt objectA

  • 如何在模块化 Android 应用程序中共享依赖项

    我有一个以模块化方式架构的 Android 项目 我通过将项目的源代码划分到多个 Gradle 模块之间来模块化项目 遵循干净的架构 https antonioleiva com clean architecture android 这是应

  • GDB可以杀死一个特定的线程吗？

    我正在运行一个应用程序 firefox 我想知道是否可以使用 GDB 附加到进程并杀死特定线程 有没有办法做到这一点 我知道此操作可能会使应用程序崩溃 EDIT 在此调试会话中 ps ax显示firefox pid是1328 gdb App

  • 如何格式化以仅包含小数（如果有）

    如果我只想显示非整数的小数 那么格式化小数的最佳方法是什么 Eg decimal amount 1000M decimal vat 12 50M 格式化后我想要 Amount 1000 not 1000 0000 Vat 12 5 not

  • 如何将 Valve 添加到 Apache Tomcat

    我通过扩展 org apache catalina valves ValveBase 类并实现 inovoke 方法为 Apache Tomcat 编写了一个 Valve 现在我想将它添加到我的Tomcat中执行 请告诉我步骤 使用您的 V

  • 什么是 Kestrel（与 IIS / Express）

    什么是 kestrel Web 服务器以及它与 IIS IIS Express 有何关系 我以前在 IIS Express 上开发应用程序并将它们托管在 IIS Web 服务器上 对于 ASP NET Core 我依赖于Microsoft

  • Django Python loaddata 失败并出现 django.db.utils.IntegrityError

    接手了一个数据库项目 我正在努力将远程数据库加载到本地数据库中 该应用程序是用 django 构建的本地数据库依然依赖sqlite开箱即用 The 远程数据库 is of postgresql type 我尝试在终端中运行的代码 pytho

  • 调整 Mathematica 中现有 Graphics 对象的样式/属性

    Mathematica 的优势之一是其一致的对象底层表示 因此 要更改绘图的属性而不重做用于生成它的计算 我可以做类似的事情 Replace myplot Graphics x List y List gt Graphics x Flatt

  • 当行值匹配时，将数据帧的列中的值除以不同数据帧中的值

    我有一个data frame x格式如下 species site count 1 A 1 1 25 2 A 1 2 1152 3 A 2 1 26 4 A 3 5 1 5 A 3 7 98 101 B 1 2 6 102 B 1 3 10

  • 完全匹配where子句mysql中utf8中的单词

    我有一个这样的查询 SELECT FROM category keyword WHERE keyword cho 本次查询返回结果keyword cho ch ch ch 我只希望结果是 keywords cho 而不是 ch ch 我能怎

  • TextField 和属性之间的 JavaFX 绑定

    如果您在 JavaFX TextField 和属性之间创建绑定 则每次击键时该绑定都会失效 从而导致文本发生更改 如果您有一系列绑定 则默认行为可能会导致问题 因为中间的编辑值可能无效 好的 我知道我可以创建从属性到文本字段的单向绑定 并注

  • Collections.sort() 抛出 Comparison 方法违反了其一般契约！例外

    我正在尝试对 List 对象进行排序 但抛出了此异常 仅适用于大型列表 排序代码 List

  • 当VBA中的某些单元格是某个数字时，如何让工作表不打印（while循环）

    我创建了一个脚本 该脚本从 SAP 获取信息并将其导出到 Excel 中 每当运行该宏时 每次返回的行数都不同 i e 第1次 4行第二次 12行等 将它们填充到表中后 我使用强大的查询编辑器读取该文件并创建一个非常简单的 ETL 函数 在

  • 从 Storyboard 转到 XIB

    我有一个故事板视图控制器 它是我的应用程序中的第一个屏幕 该应用程序的其余部分是使用 xib 设计的 我想从故事板 VC 中的按钮转到 XIB 文件 我知道如何从 xib 到故事板执行此操作 但是这个怎么样 提前致谢 从 xib 到故事板

  • 初始化顺序问题

    给出代码示例 class B Some contents class C private B b class A private B b C c 类 C 有一个对 b 的引用 因此需要用它来初始化 类 A 包含 B 的实例和 C 的实例 我

  • Facebook javascript API 中的分页是如何工作的？

    我正在尝试使用 javascript sdk 恢复我的 Facebook 新闻源中上周的帖子 我能够获得第一页 但随后 我不知道如何继续迭代其他页面 我用下面的代码尝试过 loadPosts bind click function FB a

热门标签