Question

编辑：我已经设法解决了上述问题，但是max_id会在每次加载时保持相同的状态，因此相同的20张照片会继续加载。

我正在尝试从主题标签中提取Instagram照片，然后在滚动到页面底部时使用ajax Feed调用下一组照片。问题是，我的ajax脚本从某个地方获取一个随机值并将其放在我的GET url的末尾，这会使URL无效。

我整天都在查看我的所有代码，但找不到它的错误。

的index.php

jQuery(document).ready(function(){

$('#imore').bind('click', function(){
    var tag   = $(this).data('tag'),
        maxid = $(this).data('maxid'),
        $c = $('div#instphotos'),
        $newItems = '';

    $.ajax({
      type: 'GET',
      url: 'ajax.php',
      data: {
        tag: tag,
        max_id: maxid
      },
      dataType: 'json',
      success: function(data) {
        // Output data

        $.each(data.images, function(i, src) {

            var $newItems = $('<div class="mblock"><span class="number">1</span><div class=""><a href="'+data.images[i].src+'?loadtype=iframe" class="imagebox fancybox.iframe" ititle="<div class=&quot;posttitle&quot;>@</div><div style=&quot;float:right;margin-right:15px;&quot;></div><div class=&quot;clear&quot;></div>"><img src="'+data.images[i].thumb+'"></div>').css('opacity', 0); 
            $c.isotope( 'insert', $newItems ).fadeTo('fast', 1); 

        });
        $('#imore').data('maxid', data.next_id);

      }

    });
});
});

<?php
/** Instagram PHP API */
require_once 'instagram.class.php';

// Initialize class with client_id
// Register at http://instagram.com/developer/ and replace client_id with your own
$instagram = new Instagram('19a4efd22cc1442d97057bd1083e3385');

// Get latest photos according to geolocation for Växjö
// $geo = $instagram->searchMedia(56.8770413, 14.8092744);

$tag = 'subarulove';

// Get recently tagged media
//$media = $instagram->getTagMedia($tag);

$media = $instagram->getTagMedia('breakfast',$auth=false,array('max_tag_id'=>$maxID));

// Display first results in a <ul>
echo '<div id="instphotos">';

$i = 1;
foreach ($media->data as $data) {
    echo '  <div class="photo mblock"><span class="number">'.$i.'</span><div class=""><a href="'.$data->images->standard_resolution->url.'?loadtype=iframe" class="imagebox fancybox.iframe" ititle="<div class=&quot;posttitle&quot;>@'.$data->user->username.'</div><div style=&quot;float:right;margin-right:15px;&quot;></div><div class=&quot;clear&quot;></div>">'."\n";
    echo '    <span class="roll"></span>'."\n";
    echo '    <img src="'.$data->images->low_resolution->url.'"></a></div></div>'."\n";
$i++;
}
echo '</div>';

echo '<div id="imore" data-maxid="'.$media->pagination->next_max_id.'" data-tag="'.$tag.'"><a href="#">Load more ...</a></div>';
?>

ajax.php

 require_once 'instagram.class.php';

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

  // Receive AJAX request and create call object
  $tag = !empty($_GET['tag']) ? $_GET['tag']: null;
  $maxID = !empty($_GET['maxid']) ? $_GET['maxid']: null;
  $clientID = $instagram->getApiKey();

  $call = new stdClass;
  $call->pagination->next_max_id = $maxID;
  $call->pagination->next_url = "https://api.instagram.com/v1/tags/{$tag}/media/recent?client_id={$clientID}&max_tag_id={$maxID}";

  // Receive new data
  $media = $instagram->getTagMedia($tag,$auth=false,array('max_tag_id'=>$maxID));

  // Collect everything for json output
  $images = array();
  if($media){
    foreach ($media->data as $data) {
      $src = $data->images->standard_resolution->url;  
      $thumb = $data->images->low_resolution->url;  
      $url = $data->link;

      $images = array();
       foreach ($media->data as $data) {
        $images[] = array(
          $data->images->standard_resolution->url,
          $data->images->low_resolution->url,
          $data->link,
          $data->likes->count
        );
      }
    }

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

在控制台中，只要它运行ajax请求，它就会返回：获取http://url.com/ajax.php?tag=breakfast&max_id=1400131855765479& _ = 1400114008166 500（内部服务器错误）

粗体部分是插入URL的随机值。

Answer 1

要添加分页，您需要调用分页方法，然后后续请求使用next_id，同时修复了Strict Standards: Creating default object from empty value... error

的问题

清理示例

<?php 
require_once 'instagram.class.php';

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

// Receive AJAX request and create call object
$tag   = !empty($_GET['tag'])     ? $_GET['tag']     : 'subarulove';
$maxID = !empty($_GET['next_id']) ? $_GET['next_id'] : 0;
$clientID = $instagram->getApiKey();

$call = new stdClass;
$call->pagination = new stdClass();
$call->pagination->next_max_id = $maxID;
$call->pagination->next_url = "https://api.instagram.com/v1/tags/{$tag}/media/recent?client_id={$clientID}&max_tag_id={$maxID}";

// Receive new data
$media = $instagram->pagination($call, 8); //max to load

// Collect everything for json output
$images = array();
foreach ($media->data as $data) {
    $images[] = array(
        'url'   => $data->images->standard_resolution->url,
        'thumb' => $data->images->low_resolution->url,
        'url'   => $data->link,
        'likes' => $data->likes->count 
    );
}


if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
    header('Content-Type: application/json');
    exit(json_encode(array(
        'next_id' => $media->pagination->next_max_id,
        'images' => $images
    )));
}
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Instagram pagination example using jQuery AJAX</title>

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){

    $('#imore').bind('click', function(){

        var request = $.ajax({
            url: "./index.php",
            type: "GET",
            data: { tag: $(this).data('tag'), next_id: $(this).data('next_id') },
            dataType: "json"
        });
        request.done(function( data ) {
            $.each(data.images, function(i, src) {
                $('<img src="'+data.images[i].thumb+'">').appendTo("div#instphotos");
            });

            $('#imore').data('next_id', data.next_id);
        });
        request.fail(function( jqXHR, textStatus ) {
            alert( "Request failed: " + textStatus );
        });

    });

});
</script>
</head>
<body>

<div id="instphotos">
<?php 
foreach ($images as $image){
    echo '<img src="'.$image['thumb'].'">';
}
?>
</div>
<div id="imore" data-next_id="<?php echo $media->pagination->next_max_id; ?>" data-tag="subarulove">
    <a href="Javascript:void(0);">Load more ...</a>
</div>

</body>
</html>

在ajax获取随机值GET url

1 个答案:

清理示例