0

我创建了一个 AJAX 函数，想知道为什么我的 JS 会出错。

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

        $.ajax({
            type: 'GET',
            url: '/ajax',
            data: {
                tag: tag,
                max_tag_id: maxid
            },
            dataType: 'json',
            cache: false,
            success: function(data) {
                // Output data
                $.each(data.images, function(i, src) {
                    $('section#images').append('<img src="' + data[src].images.standard_resolution.url + '">');
                });

                // Store new maxid
                $('#more').data('maxid', data.next_id);
            }
        });
    });
});

我创建了一个页面，该页面从 instagram API 获取数据并将数据存储在数组中，因此当我单击更多时，它会将更多图像加载到容器中div。

编辑：

以下是将数组编码为 json 输出的 php ajax 页面上的代码：

  $instagram = new Instagram\Instagram;

  $instagram->setAccessToken($_SESSION['instagram_access_token']);
  $token = $_SESSION['instagram_access_token'];
    //$clientID = $_SESSION['client_id'];

  $current_user = $instagram->getCurrentUser();
  $tag = $instagram->getTag('folkclothing');

  $media = $tag->getMedia(isset($_GET['max_tag_id']) ? array( 'max_tag_id' => $_GET['max_tag_id'] ) : null);

  // Collect everything for json output
  $images = array();
  foreach ($media as $data) {
/*   $collection = array($data->images->standard_resolution->url,$data->link,$data->getId(),$data->likes->count); */
    /*
$images[] = $data->images->standard_resolution->url;
    $images[] = $data->link;
    $images[] = $data->getId();
    $images[] = $data->likes->count;
*/
    /*
$data_url[] = $data->images->standard_resolution->url;
    $data_link[] = $data->link;
    $data_id[] = $data->getId();
    $data_likes[] = $data->likes->count;
    $images[] = array($data_url);
*/
    $images[] = array($data->images->standard_resolution->url,$data->link,$data->getId(),$data->likes->count);
  }

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

上面的代码创建了一个数组，然后将其转换为 json 对象，但我不确定如何将其拆分为图像 url、图像 id、喜欢和图像链接的嵌套数组。这有可能获得嵌套数组吗？

编辑结束

它确实有效，但我想在这个数组中找到特定的元素，所以我在上面创建了 AJAX 函数。

我得到的错误是：

未捕获的类型错误：无法读取未定义的属性“图像”

任何帮助都会很棒。

4

5 回答 5

1

对于这个问题的答案，我最终正确地构建了我的数组并使用 json_encode 将其全部正确列出，这样我就可以像这样提取正确的数据。

ajax.php：

  foreach ($media as $data) {
    $images[] = array(
        "data_url"=>$data->images->standard_resolution->url,
        "data_link"=>$data->link,
        "data_text"=>$data->getCaption(),
        "data_id"=>$data->getId(),
        "data_likes"=>$data->likes->count

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

这创建了正确的数据数组。

然后我更正了 js 以使其正常工作。

JS代码：

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

        $.ajax({
          type: 'GET',
          url: '/ajax',
          data: {
            tag: tag,
            max_tag_id: maxid
          },
          dataType: 'json',
          cache: false,
          success: function(data) {
            // Output data
            $.each(data.images, function(i, src) {
            var $content = $('<article class="instagram-image"><form class="forms" action="/image" method="post"><a class="fancybox" href="'+ data.images[i].data_link +'"><img alt="' + data.images[i].data_text + '" src="' + data.images[i].data_url + '" alt="' + data.images[i].data_text + '" /></a><button class="ajax instabtn like icon-heart" type="submit" name="action" value="Like"></button><input type="hidden" name="id" value="'+ data.images[i].data_id +'"><p>'+ data.images[i].data_likes +'</p></form></article>');
              $('section#images').append($content).fadeIn(1000);
              });
            // Store new maxid
            $('#more').data('maxid', data.next_id);
          }
        });
      });
    });

我希望这可以帮助那些需要额外信息的人。

于 2013-08-06T23:27:13.730 回答
1

尝试更换

            $.each(data.images, function(i, src) {
               $('section#images').append(

               '<img src="' + data[src].images.standard_resolution.url + '">'

              );
          });

和

            $.each(data.images, function(i, src) {
               $('section#images').append(

               '<img src="' + src.standard_resolution.url + '">'

              );
          });
于 2013-08-06T10:50:56.857 回答
0

在这里你正在使用Arrayof data.images，所以你应该使用indexofdata.images

试试看，

if(data.images)// check if data.images found, otherwise it will give error
{
    $.each(data.images, function(i, src){
       $('section#images').append(
          '<img src="' + data.images[i].standard_resolution.url + '">'
                        // use i ----^----here
                        // or use src.standard_resolution.url directly
       );
    });
}
于 2013-08-06T10:54:28.330 回答
0

尝试这个

 ....
 success: function(data) {
        // Output data
        $.each(data.images, function(i, src) {
          $('section#images').append(
            '<img src="' + data[i].images.standard_resolution.url + '">'
                          //----^----here
          );
        });

        // Store new maxid
        $('#more').data('maxid', data.next_id);
      }
于 2013-08-06T10:51:12.003 回答
0

更改图像标签中的数据访问

从

data[src].images.standard_resolution.url
     ^^^

至

data[i].images.standard_resolution.url
     ^
于 2013-08-06T10:51:47.330 回答