如何更新我的Ajax数据？

I am relatively new at AJAX/JSON, So apologies in advance if this turns out to be a bit of stupid question.

To practice my AJAX/JSON skills I am trying to make an weather web application. So I managed to find an api on the openweathermap website.

By using the .ajax() jQuery function I managed to load the data on my page. So I tried to take it to the next level by using an input field to change the location of the weather forecast. This is where I got stuck. I tried variety functions and approaches but I can't wrap my head around it.

This is what I've got right now.

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

       }
     });

   });

I searched for a while on this forum but I couldn't quite find what I'm looking for.

I hope someone can help me! Thanks!

EDIT

Thanks a lot guys for the great and fast response!!

The easiest way to achieve what you want would be to put the AJAX call inside the blur event you linked to input field.

And you will also need to regenerate the $urlLocal value before doing the AJAX call.

It could be something like that:

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

       }
     });

   });

The reason your code is not working is because you're not calling the ajax in your blur event. the map is loaded in the document.ready event since the ajax function is written in the document.ready event. you need to create it as a function and call it both in the document.ready and the input blur event.

try enclosing your ajax call in a method like this

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

       }
     });
}

and call this method in the document.ready event as well as the input blur event.

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

here's a working JSFIDDLE for the same.