jQuery ajax chiamate asincrone

In questa lezione parleremo del metodo di jQuery ajax e di come gestire le chiamate asincrone.

Realizzeremo un esempio utilizzando un'API per il meteo free a cui però bisogna richiedere un'api key. Troviamo su questo sito openweathermap l'API da utilizzare. Una volta ottenuta l'API key possiamo utilizzarla all'interno della nostra chiamata asincrona con AJAX.

Ecco i dati che ci restituisce l'API opportunamente impostata:

Da zero ad eroe

Entra nel mondo della programmazione web: variabili, funzioni, array, DOM, eventi. Con esercizi pratici e progetti coinvolgenti.

8 ore di corso registrato
Più di 50 algoritmi risolti passo passo
Livello base — da zero ad eroe
100% online, fruibile quando vuoi

Tra tutte le proprietà, prestiamo attenzione alle coordinate, al tempo ed alla temperatura in quanto sono quelle che ci serviranno.

jQuery ajax chiamate asincrone - esempio

L'esempio che vogliamo realizzare è dunque questo:

Una casella di input con la possibilità di inserire il nome della città ed un pulsante che al click calcola i dati che ci servono.

jQuery ajax chiamate asincrone - implementazione

Per l'implementazione pensiamo dapprima alla semplice pagina html, inserendo una casella di input, un pulsante e un container dove verranno visualizzati i dati.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <title>Document</title>
</head>
<body>

  <input type="text" id="citta" placeholder="inserisci la città">
  <button id="meteo">Meteo</button>

  <div class="container">
     <div>LON: <span id="dati-lon"></span></div>
     <div>LAT: <span id="dati-lat"></span></div>
     <div>Tempo: <span id="tempo"></span></div>
     <div>Temperatura: <span id="temperatura"></span></div>
  </div>

  <script src="js\script.js" charset="utf-8"></script>

</body>
</html>

Realizziamo adesso la chiamata asincrona utilizzando il metodo ajax in jQuery.

Al clic sul pulsante meteo, prendiamo quanto scritto nella casella di input e lo memorizziamo in una variabile, ad esempio di nome citta.

Andiamo poi a creare una variabile url in cui inseriamo come valore della chiave q, la variabile appena ricavata. Chiaramente al posto di codice-key, inserite il codice che vi è stato fornito da openweather.

Richiamiamo dunque la chiamata asincrona ajax sull'url così definito. Se la chiamata ha successo, visualizziamo i dati che ci servono nella pagina html, utilizzando semplicemente i selettori jQuery.

Convertiamo la temperatura in gradi Celsius, in quanto quella fornita è in gradi Kelvin.

Ecco dunque il codice completo in jQuery della chiamata ajax asincrona:

$(document).ready(function(){
  $('#meteo').click(function(){
    var citta = $('#citta').val();
    
    var url = 'https://api.openweathermap.org/data/2.5/weather?q='+citta+'&appid=codice-key';

    $.ajax({
        url: url,
        method: 'GET',
        success: function(risposta) {
          $('#dati-lon').text(risposta.coord.lon);
          $('#dati-lat').text(risposta.coord.lat);
          $('#tempo').text(risposta.weather[0].main);
          var temp = risposta.main.temp;
          temp = Math.round(temp - 273);
          $('#temperatura').text(temp);

          }
        },
        error: function() {
          console.log('Si è verificato un errore');
        }
      });
      });
});

Lezione precedente: esempio di chiamata ajax

Lezione successiva: