AJAX jQuery e JSON — CodingCreativo

In questa lezione utilizzeremo le tecnologie AJAX jQuery e JSON per realizzare una chiamata asincrona ad un file presente sul server.

Dunque proveremo a leggere i dati da un file JSON. Inoltre, per chi volesse approfondire l'argomento inerente i file JSON, indico un semplice tutorial che ho creato: Introduzione a JSON. Allego anche il link all'esempio inerente la creazione della chiamata AJAX per i file JSON, realizzata in JavaScript: AJAX e JSON.

Esempio utilizzando AJAX jQuery e JSON

Dunque creiamo lato html questo semplice codice, composto da un pulsante che consente di inviare dei dati e da un div che consente di visualizzare i dati json.

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

<div id="dati-file"></div>
<button type="button" id="load">Carica dati</button>

Dopo, lato jQuery, creo una chiamata AJAX al file JSON caricato sul server web.

Questo file contiene le seguenti informazioni in formato stringa che il metodo provvede direttamente a trattare come oggetto.

{
"marca": "Fiat",
"modello": "500",
"colore": "bianco",
"alimentazione": "benzina",
"anno": "2010"
}

Ecco dunque il link al file: https://www.codingcreativo.it/json-ex/auto.json

Per il corretto funzionamento non dimentichiamo, inoltre, di inserire nella pagina html il link alla cdn jQuery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Inseriamo anche il link al nostro script che andremo a creare.

Quindi utilizzeremo innanzitutto il metodo affrontato nella lezione precedente $.ajax e impostiamo l'url e i parametri method, success ed error.

Success è la funzione che verrà eseguita in caso di successo della chiamata a cui passiamo come parametro risposta che rappresenta i dati restituiti dal server web. Risposta è dunque in questo caso l'oggetto restituito in caso di successo. Di conseguenza, per richiamare le proprietà dell'oggetto basta seguire la notazione utilizzata per gli oggetti JavaScript.

Error invece verrà eseguita in caso di errore, visualizzando semplicemente il messaggio: 'Si è verificato un errore'.

Ecco di seguito il codice completo realizzato utilizzando AJAX jQuery e JSON:

$(document).ready(function(){
  $('#load').click(function (){
    $.ajax({
      url: 'https://www.codingcreativo.it/json-ex/auto.json',
      method: 'GET',
      success: function(risposta) {
        var dati = risposta.marca + ' ' + risposta.modello + ' ' + risposta.colore + ' ' + risposta.alimentazione + ' ' + risposta.anno;
        $('#dati-file').html(dati);
      },
      error: function() {
        console.log('Si è verificato un errore');
      }
    });
    });
});

Prova l'esempio che utilizza AJAX jQuery e JSON

Lo stesso risultato si poteva ottenere con un ciclo for in. Quindi modifichiamo il codice in questo modo:

success: function(risposta) {
        for (k in risposta){
           var dati = risposta[k] + ' ';
            $('#dati-file2').append(dati);
        }
      },

Lezione precedente: utilizzo di ajax e jquery

Lezione successiva: chiamate get in AJAX con jQuery