Input value in ajax call does not work

问题

I am working on a small trial and error project which allows you to simply search photos on Instagram. I found this example and it works flawlessly. Unfortunately, you can only use one static tag in that example. What I am trying to do is allow a user to search for a tag. That input value is then used as the tag that is used in the ajax call. Unfortunately this doesn't work. No errors in console or anything. Just no response.

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
      ));
?>

Yes I filled in my client ID :)

And instagram.class.php but adjusted as the answer previously mentioned suggested.

Any help or direction with this?

回答1:

Change the type of your submit button to button or cancel the submission of the form

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

$("form").on("submit", function(ev) {
    ev.preventDefault();
});

来源：https://stackoverflow.com/questions/17487231/input-value-in-ajax-call-does-not-work

标签

jquery

ajax

api

instagram