从instagram API加载更多图像,给我相同的图像

时间:2014-07-08 15:12:39

标签: php jquery ajax api instagram

我正在使用带有Ajax的Instagram PHP API来获取用户媒体流,它为每个请求提供了相同的图像。

以下是页面代码:

/**
   * Instagram PHP API
   *
   * @link https://github.com/cosenary/Instagram-PHP-API
   * @author Christian Metz
   * @since 20.06.2012
   */

  require_once 'api/instagram.class.php';

  // Initialize class for public requests
  $instagram = new Instagram('CLIENT_ID');


  // Get recently tagged media
  $media = $instagram->getUserMedia(USER_ID, LIMIT_NUMBER);

  // Display first results in a <ul>
  echo "<ul id=\"photos\">";
  foreach ($media->data as $data) {
    echo "<a target=\"_blank\" href=\"{$data->images->standard_resolution->url}\"><li><img src=\"{$data->images->low_resolution->url}\"></li></a>";
  }
  echo "</ul>";

  // Show 'load more' button
  echo "<br><div id='content'><div id='spinner'><img src='/wp-content/themes/tmg/ui/img/spinner.png' id=\"more\" data-maxid=\"{$media->pagination->next_max_id}\"></div></div>";

这是AJAX.PHP

  /**
   * Instagram PHP API
   *
   * @link https://github.com/cosenary/Instagram-PHP-API
   * @author Christian Metz
   * @since 20.06.2012
   */

  require_once 'api/instagram.class.php';

  // Initialize class for public requests
  $instagram = new Instagram('CLIENT_ID');

  // Receive AJAX request and create call object
  $tag = $_GET['tag'];
  $maxID = $_GET['max_id'];
  $clientID = $instagram->getApiKey();

  $call = new stdClass;
  $call->pagination->next_max_id = $maxID;
  $call->pagination->next_url = "https://api.instagram.com/v1/users/4563432423/media/recent?max_id=436456456456456456&client_id=9089798ayut675675757a";

  // Receive new data
$media = $instagram->getUserMedia('76766456534', 32); 

  // Collect everything for json output
  $images = array();
  foreach ($media->data as $data) {
    $images[] = $data->images->low_resolution->url;
  }

  echo json_encode(array(
    'next_id' => $media->pagination->next_max_id,
    'images'  => $images
  ));

AJAX请求

$(document).ready(function() {
  $('#more').click(function() {
    var tag   = $(this).data('tag'),
        maxid = $(this).data('maxid');

    $.ajax({
      type: 'GET',
      url: '<?php bloginfo( 'template_directory' ); ?>/ajax.php',
      data: {
        tag: tag,
        max_id: maxid
      },
      dataType: 'json',
      cache: false,
      success: function(data) {
        // Output data
        $.each(data.images, function(i, src) {
          $('ul#photos').append('<li><img src="' + src + '"></li>');
        });
    });
  });
});

我的API请求是成功的,所以代码中显而易见的东西是错误的,我不是非常熟悉PHP,任何人都已经做过,所以可以帮助我吗?

1 个答案:

答案 0 :(得分:0)

当PHP页面初始呈现为HTML

data-maxid=\"{$media->pagination->next_max_id}

将导致 data-maxid 始终为相同的数字(我假设,因为这是一个ajax请求,页面不会重新加载)。

一个解决方案是让你的ajax请求“on complete”回调更新data-maxid属性。

看起来好像你已经传回了下一个Id('next_id' => $media->pagination->next_max_id),你只需要让js更新数据属性。

如果你使用的是jQuery,可能会看起来像这样:

//ajax onComplete callback
function(result){
   $('#more').data('maxid', result.next_id);
}

<强>更新

我不是百分百肯定,但这种改变可能有效:

  //this probably shouldn't be static...
  $call->pagination->next_url = "https://api.instagram.com/v1/users/4563432423/media/recent?max_id=" . $maxId . "&client_id=9089798ayut675675757a";
  // Receive new data
  $media = $instagram->pagination($call);

查看PHP library doc,看来您只需将原始对象传回“分页”功能即可。

您对$call的操作可能包含完成请求所需的字段,否则可能会出错。