Question

我创建了一个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中。

修改

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

  $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函数。

我得到的错误是：

未捕获的TypeError：无法读取未定义的属性“图像”

任何帮助都会很棒。

Answer 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 + '">'

              );
          });

Answer 2

对于这个问题的答案，我最终正确地构建了我的阵列并使用了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);
          }
        });
      });
    });

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

Answer 3

试试这个

 ....
 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);
      }

Answer 4

更改图片代码中的数据访问

这

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

到

data[i].images.standard_resolution.url
     ^

Answer 5

您正在使用Array data.images，因此您应使用index的{{1}}

试试吧，

data.images

Ajax函数找不到合适的数据

5 个答案: