在Ajax调用输入值不起作用 [英] Input value in ajax call does not work

问题描述

我工作的一个小试验和错误的项目，让您只搜索照片上的Instagram。我发现<一href="http://stackoverflow.com/questions/11182191/take-all-photos-from-instagram-who-have-the-specific-hashtag-with-php#answer-16651048">this例如的，它完美的作品。不幸的是，你只能在这个例子中使用一个静态标签。我所要做的是让用户搜索的标记。该输入值被用作用于Ajax调用的标记。不幸的是这是行不通的。在控制台或任何没有错误。只是没有响应。

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

是的，我填写我的客户ID：）

Yes I filled in my client ID :)

和 instagram.class.php 但调整pviously提到的答案$ P $建议。

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

任何帮助或方向呢？

推荐答案

更​​改提交按钮的类型按钮或取消提交表单

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

这篇关于在Ajax调用输入值不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！