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>