Javascript Flickr API始终返回相同的数据

我有一个小天气应用程序。我通过POST请求获取天气数据，并将其附加到文档中，效果很好

用户可以按城市查询天气，现在我想用一个单独的jQuery$Ajax请求加载该城市的图像

然而，我总是得到同样的结果

与应用程序相关的应用程序结构如下所示：

 <input id="getIt" name="cityajax" type="text" class="ghost-input" 
 placeholder="Enter a City" required> // get user input, querying a city
 <button id="submit">Submit</button>

         <span class="humidLogo">Current humidity:</span> <i class="fas fa-temperature-low" ></i>    <span class="apiHumidity"> % </span>


       <div class="FlickResponse"></div> // flickrResposnse gets appended here
   </div>

CSS不相关，因此我立即跟进相关的JS函数：

var destination = $("#getIt").val(); // cache the user input, I am not sure I have to listen for a change event here and then update the state.
var flickerAPI =
  "https://api.flickr.com/services/feeds/photos_public.gne?format=json&tags=" +
  destination; // the url to get access the api

$.ajax({
  url: flickerAPI,
  dataType: "jsonp", // jsonp
  jsonpCallback: "jsonFlickrFeed", // add this property
  success: function(result, status, xhr) {
    $(".FlickResponse").html(""); // here I want to empty the contents of the target div, but this never happens
    $.each(result.items, function(i, item) {
      $("<img>")
        .attr("src", item.media.m)
        .addClass("oneSizeFitsAll")
        .appendTo(".FlickResponse");
      if (i === 1) {
        return false;
      }
    });
  },
  error: function(xhr, status, error) {
    console.log(xhr);
    $(".FlickResponse").html(
      "Result: " +
        status +
        " " +
        error +
        " " +
        xhr.status +
        " " +
        xhr.statusText
    );
  }
});

仅此而已。那么为什么我总是从API得到相同的响应呢？我是否必须收听输入字段上的更改事件？因为POSt请求在没有更改事件侦听器的情况下工作

是不是因为我正在查询2个API，并且我使用相同的输入字段来回答这个愚蠢的问题，但是你永远不知道x

这是一个带有完整代码的代码笔，只需输入一个城市并单击提交按钮：

---

我会把图像检索和天气查询拉到另一个功能中，如下所示，那么你就很好了

我已经转向另一个代码笔：

---

我不认为提交事件实际上调用了ajax函数。我相信这个函数应该在“$submit.clickfunction e”@Mo A内调用，lol谢谢你的问题。很高兴你让它工作起来。投票通过，被认为是正确的答案，因为这个代码现在被官方美化了。很高兴看到，尽管我的工作正常，但还是有一个jsonp调用，这段代码是可读的，可扩展的，很多人在查看这段代码时都会学到一些东西。美丽的

function loadDestinationImage() {
    var destination = ($("#getIt").val());
    var flickerAPI = "https://api.flickr.com/services/feeds/photos_public.gne?format=json&tags=" +  destination;
    $.ajax({
        url: flickerAPI,
        dataType: "jsonp", // jsonp
        jsonpCallback: 'jsonFlickrFeed', // add this property
        success: function (result, status, xhr) {
            $(".FlickResponse").html("");
            $.each(result.items, function (i, item) {
                $("<img>").attr("src", item.media.m).addClass("oneSizeFitsAll").appendTo(".FlickResponse");
                if (i === 1) {
                    return false;
                }
            });
        },
        error: function (xhr, status, error) {
                console.log(xhr)
                $(".FlickResponse").html("Result: " + status + " " + error + " " + xhr.status + " " + xhr.statusText)
        }
    });
}

 function loadWeather() {
    var destination = ($("#getIt").val());

    $.post("https://api.openweathermap.org/data/2.5/weather?q=" +
    destination +
    "&units=metric&appid=15c9456e587b8b790a9092494bdec5ff",
    function (result, status, xhr) {

        var APIresponded =  result["main"]["temp"];
        var APIweather =  result["weather"][0]["description"];
        var sunGoing = result["sys"]["sunset"];
        var output = destination.capitalize();
        var humidValue = result["main"]["humidity"];
        var windy = result["wind"]["speed"];
        var windDirection = result["wind"]["deg"];

        if (windDirection <= 90) {
          windDirection = "southwest"
        }
        if (windDirection <= 180) {
          windDirection = "northwest"
        }
        if (windDirection <= 270) {
          windDirection = "northeast"
        }
        if (windDirection <= 360) {
          windDirection = "southeast"
        }
        if (APIweather.includes("snow")) {
          $('#displaySky').addClass('far fa-snowflake');
        }
        if (APIweather.includes("rain")) {
          $('#displaySky').addClass('fas fa-cloud-rain');
        }
        if (APIweather.includes("overcast")) {
          $('#displaySky').addClass('fas fa-smog');
        }
        if (APIweather.includes("sun") || APIweather.includes("clear")) {
          $('#displaySky').addClass('fas fa-sun');
        }
        if (APIweather.includes("scattered")) {
          $('#displaySky').addClass('fas fa-cloud-sun');
        }
        $("#message").html("The temperature in " + output + " is : " + APIresponded + " degrees. The sky looks like this: ");
        $(".apiHumidity").text(humidValue + " %");

        $('.apiWind').html(windy + 'km per hour. The wind direction is  ' + windDirection);
        console.log(APIweather);
    }

    ).fail(function (xhr, status, error) {
        alert("Result: " + status + " " + error + " " +
        xhr.status + " " + xhr.statusText);
    });
}

$("#submit").click(function (e) {   
    loadDestinationImage();
    loadWeather();
});