Как обновить данные ajax?

Question

Я относительно новичок в AJAX/JSON, поэтому извиняюсь заранее, если это окажется немного глупым вопросом.

Чтобы попрактиковаться в моих навыках AJAX/JSON, я пытаюсь создать веб-приложение погоды. Поэтому мне удалось найти api на веб-сайте openweathermap.

С помощью функции .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); 

     } 
    }); 

    }); 

Я искал какое-то время на этом форуме, но я не мог найти то, что искал.

Я надеюсь, что кто-то может мне помочь! Спасибо!

EDIT

Большое спасибо ребята за большой и быстрый ответ !!

Answer 1

Самый простой способ добиться того, что вы хотите, это поместить вызов AJAX внутри события размытия, связанного с полем ввода.

Для выполнения вызова 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 случае. карта загружается в событие document.ready, так как функция ajax записывается в событие document.ready. вам необходимо создать его как функцию и вызвать его как в документе document.ready, так и в событии input blur.

попробовать ограждающих ваш АЯКС вызов в методе, как этот

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 для этого же.