0

我正在做一个小试错项目，让你可以简单地在 Instagram 上搜索照片。我找到了这个例子，它完美无缺。不幸的是，在该示例中您只能使用一个静态标签。我想要做的是允许用户搜索标签。然后将该输入值用作在 ajax 调用中使用的标记。不幸的是，这不起作用。控制台或任何东西都没有错误。只是没有回应。

jQuery

// Search new tag
$("form#s-form > button").click(function () {
    if (!$("form#s-form > input").val()) {
        // notice no value given
    } else {
        var tag = $("form#s-form > input").val(), // Here is the tag
            maxid = $("#more").data("maxid");

        // change the data-tag to the tag that is searched for
        $("#more").data("tag", tag); // this does NOT work

        $.ajax({
            type: "GET",
            url: "ajax.php",
            data: {
                tag: tag, // Here it is used in ajax
                max_id: maxid
            },
            dataType: "json",
            cache: false,
            success: function (data) {
                // Clear current data
                $("div#photos").empty();

                // Output data
                $.each(data.images, function (i, src) {
                    $("div#photos").append('<div class="gallery-item"><a href="#"><img src="' + src + '"></a></div>');
                });

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

                // Some extra functions
            }
        });
    }
});

HTML/PHP

<div id="wrapper">
    <div id="photos">
        <?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('MYCLIENT_ID');
            // Show 'load more' button
            echo '<button id="more" data-maxid="'.$media->pagination->next_max_id.'" data-tag="'.$tag.'">Meer foto\'s?</button>';
        ?>
    </div>

    <form id="s-form">
        <input type="text" placeholder="Andere zoeken">
        <button type="submit">Zoek!</button>
    </form>
    <a href="#" id="added">Foto's toegevoegd <br> Scroll naar beneden</a>
</div>

ajax.php

<?php
    /**
     * Instagram PHP API
     */

     require_once 'instagram.class.php';

      // Initialize class for public requests
      $instagram = new Instagram('MYCLIENT_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/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();
      foreach ($media->data as $data) {
        $images[] = $data->images->standard_resolution->url;
      }

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

是的，我填写了我的客户 ID :)

和instagram.class.php但根据前面提到的答案进行了调整。

对此有任何帮助或指导吗？

4

1 回答 1

1

submit将按钮的类型更改为button或取消提交表单

<form id="s-form">
    <input type="text" placeholder="Andere zoeken">
    <button type="button">Zoek!</button>
</form>

或者

$("form").on("submit", function(ev) {
    ev.preventDefault();
});
于 2013-07-05T11:11:12.930 回答