Chiamate GET in AJAX con jQuery

In questa lezione realizzeremo un semplice esempio di chiamate GET in AJAX con jQuery, utilizzando una semplicissima API che restituisce l'immagine di alcuni cani.

Un'API dog che potete trovare al seguente link: https://dog.ceo/dog-api/ e che non ha bisogno di nessuna API key per poterla utilizzare.

Chiamate GET in AJAX con jQuery - esempio

Creiamo, nella pagina html, una lista di razze di cani e, dopo aver cliccato su ogni voce facciamo comparire 5 foto del cane selezionato.

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

Quindi innanzitutto costruiamo la nostra pagina html dove inseriremo un elenco puntato con 5 razze di cane terrier.

Dopo inseriamo un div dove andremo ad inserire 5 immagini segnaposto in formato png.

Questo segnaposto verrà poi sostituito con l'immagine del cane utilizzando il selettore attr di jQuery.

<!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>
  <link rel="stylesheet" href="css\style.css">
  <title>Chiamate GET in AJAX con jQuery</title>
</head>
<body>
  <ul id="scelta">
    <li>russell</li>
    <li>border</li>
    <li>fox</li>
    <li>scottish</li>
  </ul>

    <div class="cane">
      <img src="segnaposto.png" alt="immagine-cane1">
      <img src="segnaposto.png" alt="immagine-cane2">
      <img src="segnaposto.png" alt="immagine-cane3">
      <img src="segnaposto.png" alt="immagine-cane4">
      <img src="segnaposto.png" alt="immagine-cane5">
    </div>

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

</body>
</html>

Script di esempio per le chiamate GET in AJAX con jQuery

Ragioniamo su quello che occorre implementare.

Quando facciamo click sulle voci dell'elenco, dobbiamo innanzitutto ricavare il testo inserito nella voce cliccata, attraverso il metodo text. Memorizziamo questo valore nella variabile image.

Dopo, richiamiamo l'url inserendo il valore della variabile appena ricavata:

https://dog.ceo/api/breed/terrier/'+image+'/images

Poi utilizziamo il metodo ajax per effettuare la nostra chiamata GET e, se ha successo, richiamiamo la funzione leggiDati che abbiamo creato.

La funzione leggiDati, con un ciclo form seleziona semplicemente 5 immagini e le visualizza nella nostra pagina html, ricavando la posizione attraverso il metodo eq di jQuery.

Chiamate GET in AJAX con jQuery - Ecco dunque il codice completo:

$(document).ready(function() {

    $('#scelta li').click(function(){
	$('.cane').hide();
	image = $(this).text();
	console.log(image);

	var url = 'https://dog.ceo/api/breed/terrier/'+image+'/images';

	$.ajax(
		{
		'url': url,
		'method': 'GET',
		'success': function(risposta){
			leggiDati(risposta.message);
		},
		'error':function(){
			alert('errore!');
			}
		}
	);

   });

});

function leggiDati (data){
	for (var i = 0; i < 5; i++){
		var immagine = data[i];
		 $('.cane img').eq(i).attr('src', immagine);
		 console.log($('.cane img'));
	}

}

Invece di copiare le immagini vuote nell'html si potrebbe utilizzare handlebars per clonare dei template oppure il metodo clone di jQuery.

Di seguito la soluzione con handlebars.

<!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://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.1.2/handlebars.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <link rel="stylesheet" href="css\style.css">
  <title>Document</title>
</head>
<body>

  <ul id="scelta">
    <li>russell</li>
    <li>border</li>
    <li>fox</li>
    <li>scottish</li>
  </ul>

  <div class="container">
  </div>

  <script id="entry-template" type="text/x-handlebars-template">
    <div class="cane">
      <img src="{{animale}}" alt="">
    </div>
  </script>

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

</body>
</html>

Dato che le immagini sono contenute in un array, posso andare a realizzare un ciclo for e creare un mio oggetto che chiamo context con la proprietà animale impostata al valore dell'array.

Ecco dunque una possibile soluzione:

$(document).ready(function() {

   $('#scelta li').click(function(){
	$('.cane').hide();
	image = $(this).text();

	var url = 'https://dog.ceo/api/breed/terrier/'+image+'/images';

	$.ajax(
		{
		        'url': url,
			'method': 'GET',
			'success': function(risposta){
				leggiDati(risposta.message);
			},
			'error':function(){
				alert('errore!');
			}
			}
		);
	});
});

function leggiDati (data){
	var source = $('#entry-template').html();
	var template = Handlebars.compile(source);

	for (var i = 0; i < 5; i++){
	        var context = {
			'animale': data[i]
		};
		var html = template(context);
		$('.container').append(html);
	}
}

Nelle prossime lezioni faremo altri esempi di chiamate GET in AJAX con jQuery.

Lezione precedente: AJAX, jQuery e JSON

Lezione successiva: esempio di chiamata AJAX