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

问题描述

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

jQuery

//搜索新标签$("form#s-form > button").click(function () {if (!$("form#s-form > input").val()) {//注意没有给定值} 别的 {var tag = $("form#s-form > input").val(),//这里是标签maxid = $("#more").data("maxid");//将数据标签更改为要搜索的标签$("#more").data("tag", tag);//这不起作用$.ajax({类型:获取"，网址:ajax.php"，数据: {tag: tag,//这里在ajax中使用max_id: 最大值},数据类型:json"，缓存:假，成功:功能(数据){//清除当前数据$("div#photos").empty();//输出数据$.each(data.images, function (i, src) {$("div#photos").append('<div class="gallery-item"><a href="#"><img src="' + src + '"></a>

');});//存储新的 maxid$("#more").data("maxid", data.next_id);//一些额外的功能}});}});

HTML/PHP

<div id="照片"><?php/*** Instagram PHP API*/require_once 'instagram.class.php';//用client_id初始化类//在 http://instagram.com/developer/注册并用你自己的替换 client_id$instagram = new Instagram('MYCLIENT_ID');//显示加载更多"按钮echo '<button id="more" data-maxid="'.$media->分页->next_max_id.'" data-tag="'.$tag.'">Meer foto\'s?';?>
<form id="s-form"><input type="text" placeholder="Andere zoeken"><button type="submit">Zoek!</button></表单><a href="#" id=" added">Foto 的 toegevoegd <br>滚动 naar beneden

ajax.php

getApiKey();$call = 新标准类；$call->分页->next_max_id = $maxID;$call->pagination->next_url = "https://api.instagram.com/v1/tags/{$tag}/media/recent?client_id={$clientID}&max_tag_id={$maxID}";//接收新​​数据$media = $instagram->getTagMedia($tag,$auth=false,array('max_tag_id'=>$maxID));//收集 json 输出的所有内容$图像=数组()；foreach ($media->data as $data) {$images[] = $data->images->standard_resolution->url;}回声json_encode(数组('next_id' =>$media->分页->next_max_id,'图像' =>$图片));?>

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

和 instagram.class.php 但按照前面提到的答案进行了调整.

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

解决方案

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

<input type="text" placeholder="Andere zoeken"><button type="button">Zoek!</button></表单>

或

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

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?

解决方案

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>

or

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

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