Risorse

index.html

<!DOCTYPE html>
<!-- 
    ========================================================================
     METODO jQuery AJAX $().load
    ========================================================================
     Semplice esempio di implementazione del metodo. 

     Nella cartella contenuti ci sono quattro file di testo che contengono 
     codice HTML. 

     La pagina è divisa in due colonne (secondo lo stile Bootstrap). I 
     pulsanti collocati nella colonna destra caricano il contenuto dei file 
     nell'elemento div#contenuto.

     Per quanto riguarda contenuti/contenuto-4.html viene caricata la parte 
     del file specificata dal selettore passato di seguito all'url al 
     metodo $().load.
    =========================================================================
 -->
<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">
    <title>AJAX: il metodo load</title>
    <link rel="stylesheet" href="bower_components/bootstrap-4.1.1-dist/css/bootstrap.css">
</head>
<body>
    <div class="jumbotron jumbotron-fluid">
        <div class="container">
            <h1 class="display-4">jQuery AJAX</h1>
            <p class="lead">Il metodo $().load()</p>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-sm">
                <div id="contenuto">
                    <p>Qui saranno caricati i dati</p>
                </div>
            </div>
            <div class="col-sm-auto">
                <!-- Nota Bene: Le url dei contenuti da caricare vengono memorizzati nell'attributo custom data-contenuto -->
                <button class="btn btn-primary mb-2" data-contenuto="contenuti/contenuto-1.txt">Contenuto 1</button><br />
                <button class="btn btn-primary mb-2" data-contenuto="contenuti/contenuto-2.txt">Contenuto 2</button><br />
                <button class="btn btn-primary mb-2" data-contenuto="contenuti/contenuto-3.txt">Contenuto 3</button><br />
                <!-- Passando di seguito all'url un selettore css carico sono la parte di contenuto definita da quel selettore -->
                <button class="btn btn-primary mb-2" data-contenuto="contenuti/contenuto-4.html #galleria">Contenuto 4</button><br />
            </div>
         </div>
    </div>
    <script src="bower_components/jquery-3.3.1.min/index.js"></script>
    <script>
        // Gestisco l'evento click per tutti gli elementi che hanno l'attributo data-contenuto 
        $('[data-contenuto]').click(function () {
            // Ricavo l'url da passare al metodo load dal valore dell'attributo dat-contenuto dell'elemento cliccato  
            var url = $(this).attr('data-contenuto');
            // Invoco il metodo load utilizzando la funzione di callbak per gestire gli eventuali errori
            $('#contenuto').load(url, function (responseText, statusText, xhr) {  
                if (statusText == "error")
                    alert('Errore: ' + responseText);
            });
        });
    </script>
</body>
</html>

 

 

Torna all'inizio