jQuery: richieste ajax con load()

Il metodo più semplice per effettuare delle richieste ajax e caricare del codice html all’interno di un ben preciso target è utilizzare il metodo load().

Nella nostra pagina inseriremo un bottone sul quale faremo il solito binding del click che farà una chiamata ajax a un file html.

Il nostro web server manderà il file html richiesto che verrà iniettato all’interno di un div target opportunamente predisposto.

Per comprendere quanto succede nella pagina è consigliabile osservare gli eventi tramite la console di firebug se si usa firefox oppure la console di chrome.

Il codice html

<button id="trigger">GET</button><br>
<div id="target"></div>

E poi il codice javascript che sarà composto da gestione dell’evento e chiamata ajax con il metodo load()

$(document).ready(function() {
$('#trigger').click(function() {
$('#target').load('snippet.html');
});
});

Ovvero all’evento click sull’oggetto che ha id trigger vai a riempire il div con id target con la risposta della chiamata load()

L’esempio