AJAX jQuery e JSON

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.

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

Alcuni link utili

Tutorial jQuery

Tutorial JavaScript

Rimuovere attributi agli elementi del DOM con JavaScript

Creare attributi agli elementi

Come creare elementi nel dom con javascript

Dom in javascript

Come creare una galleria di immagini con javascript

Utilizzare gli array in javascript

Alcuni esempi con javascript alert

Autore dell'articolo: Cristina

Avatar per Coding Creativo

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *