Gestione dei File JSON con Ajax e jQuery

• AJAX = Asynchronous JavaScript and XML.
• AJAX consiste nel caricare i dati in background e visualizzarli sulla pagina Web, senza ricaricare l'intera pagina
• Con i metodi jQuery AJAX, puoi richiedere testo, HTML, XML o JSON da un server remoto utilizzando sia HTTP Get che HTTP Post
• Puoi caricare i dati esterni direttamente negli elementi HTML selezionati della tua pagina web!

Sintassi di Ajax (versione short) con jQuery

//Carica JSON-encoded data dal servere usando la richiesta GET HTTP.
	$.getJSON('https://dummyjson.com/products', function(data){

        //funzione
        $.each(data, function(index, element){
            //svolgimento funzione
        });
    });

Esempio in funzione: File JSON via Javascript

Codice della Lezione: file JSON caricato

//inizializzazione jQuery
$(document).ready(function(){

    $('#button1').on('click',function(){
        //metodo lungo Caricamento JSON
            //Esegue una richiesta AJAX asincrona
            $.ajax({
                //Specifica il tipo di richiesta. (GET o POST)
                type : 'GET',
                // Specifica dove prelevare il file (obbligatorio)
                url: '../../import/persone.json',
                // specifica la tipologia di file (non obbligatorio)
                dataType: 'json',
                // se non vuoi far caricare il file nella cache del browser
                cache : 'false',
                // Una funzione da eseguire quando la richiesta ha esito positivo

                success: function(data){

                    $.each(data, function(index, element){
                        if(element.id === undefined  && element.nome === undefined  & element.cognome === undefined ){
                            return null;
                        }else{
                            $('#esempio').append($('<ul>', {html: "<li>id: " + element.id + " " + element.nome + " " + element.cognome + '</li></ul>'}));
                        }
                    });
                }
            });
        });

    $('#button2').one('click',function(){
        //metodo abbreviato per Caricamento Json
        $.getJSON('https://dummyjson.com/products', {cache : false}, function(data){

            //usando il ciclo forEach vado a ciclare tutti gli elementi presenti all'interno del JSON
            // con la variabile products vado a definire da quale sottosezione del file json deve leggermi i dati
            let products = data['products'];
            $.each(products, function(index, element){                
                    let $elem = $('#prodotti');
                    $elem.append(
                        $('<div/>', {'class': 'flex-wrap my-card'}).append(
                            $('<div/>', {'class': 'inner'}).append(
                                $('<img>').attr("src",products[index].thumbnail).attr("width","250px")
                            )
                        ).append(
                            $('<div/>', {'class': 'inner'}).append(
                                $('<span/>', {text: products[index].title})
                            )
                        )
                    );               
            });
        });
    });
});