ajax调用中的输入值不起作用

Posted 2023-05-08

【中文标题】ajax调用中的输入值不起作用

【英文标题】：Input value in ajax call does not work

【发布时间】：2013-07-05 10:55:52

【问题描述】：

我正在做一个小型试验和错误项目，让您可以简单地在 Instagram 上搜索照片。我找到了this example，它完美无缺。不幸的是，在该示例中您只能使用一个静态标签。我想要做的是允许用户搜索标签。然后将该输入值用作在 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，但根据前面提到的答案进行了调整。

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

【问题讨论】：

您能否发布应用了解决方案的代码？谢谢

【参考方案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();
);

【讨论】：

我选择了第二个解决方案，它有效！但我似乎无法理解为什么？你能详细说明一下吗？ (+1)

当点击按钮时，您的点击处理程序会被执行（包括在 instagram 上搜索的 ajax 请求）。但由于按钮是submit 按钮，因此表单也会被提交，在这种情况下，会重新加载页面。