Question

我是AJAX / JSON的新手，如果事实证明这是一个有点愚蠢的问题，请提前道歉。

要练习我的AJAX / JSON技能，我正在尝试制作天气Web应用程序。所以我设法在openweathermap网站上找到了一个api。

通过使用.ajax（）jQuery函数，我设法在我的页面上加载数据。因此，我尝试使用输入字段更改天气预报的位置，将其提升到新的水平。这是我被卡住的地方。我尝试了各种各样的功能和方法，但我无法绕过它。

这就是我现在所拥有的。

   $(document).ready(function(){

      var $city = "New York, USA";
      var $parameter = "Imperial";
      var $urlLocal = "http://api.openweathermap.org/data/2.5/weather?q=" + $city + "&units=" + $parameter + "&APPID=0013269f6f2be27afffaa8b122e8f9f8";

     var $input = $('.search'); //input field


     $input.blur(function(){
      $city = $input.val();
      console.log($city);
     });

     $.ajax({
       dataType: "json",
       url: $urlLocal,
       success: function(data) {
        console.log("success", data);

        $('.temp').html(data.main.temp + "&#8457");
        $('.location').html(data.name);

       }
     });

   });

我在这个论坛上搜索了一段时间，但我找不到我想要的东西。

我希望有人可以帮助我！谢谢！

修改

非常感谢大家的响应！

Answer 1

实现您想要的最简单方法是将AJAX调用放在链接到输入字段的blur事件中。

在进行AJAX调用之前，您还需要重新生成$ urlLocal值。

可能是这样的：

  $input.blur(function(){

      $city = $input.val();

      $urlLocal = "http://api.openweathermap.org/data/2.5/weather?q=" + $city + "&units=" + $parameter + "&APPID=0013269f6f2be27afffaa8b122e8f9f8";

      $.ajax({
       dataType: "json",
       url: $urlLocal,
       success: function(data) {
        console.log("success", data);

        $('.temp').html(data.main.temp + "&#8457");
        $('.location').html(data.name);

       }
     });

   });

Answer 2

您的代码无效的原因是因为您未在blur事件中调用ajax。由于ajax函数是在document.ready事件中编写的，因此地图会加载到document.ready事件中。您需要将其创建为函数并在document.ready和input blur事件中调用它。

尝试在这样的方法中包含你的ajax调用

function LoadMap(){
          var $urlLocal = "http://api.openweathermap.org/data/2.5/weather?q=" + $city + "&units=" + $parameter + "&APPID=0013269f6f2be27afffaa8b122e8f9f8";
    $.ajax({
       dataType: "json",
       url: $urlLocal,
       success: function(data) {
        console.log("success", data);

        $('.temp').html(data.main.temp + "&#8457");
        $('.location').html(data.name);

       }
     });
}

并在document.ready事件以及input blur事件中调用此方法。

$input.blur(function() {
    $city = $input.val();
    console.log($city);
    LoadMap();
});

这是一个有效的JSFIDDLE。

如何更新我的ajax数据？

2 个答案: