Press ESC to close

jQuery ajax chiamate asincrone

0 1487

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:

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

Alcuni link utili

Indice tutorial JavaScript

Le funzioni di callback

Esempi funzioni di callback

Come utilizzare le callback e setTimeout

Cifrario di Cesare online

Come realizzare un convertitore da decimale a binario, ottale ed esadecimale

Come creare PDF con JavaScript

PDF da un form con JavaScript

Proprietà di un PDF con JavaScript

Libreria jsPDF

Other stories

sort JavaScript

Next Story

map JavaScript

Previous Story