La richiesta è di default di tipo GET ma è possibile utilizzare il POST impostando i dati della chiamata con il formato coppia chiave/valore.
La sintassi è la seguente:
$(document).ready(function(){
$("a#link_che_attiva_la_chiamata_ajax").click(function(){
$("div#dove_inserisco_il_codice_ricevuto").load(
url,
{data},
function(){
// funzione callback da eseguire alla fine
});
});
});
I parametri che possono essere gestiti sono:| Nome Opzione | Tipo | Default | Descrizione |
| url | String | L'URL della pagina contenente l'HTML da caricare. | |
| data (opzionale) | Map, String | Coppia di dati in formato chiave/valore. Sono i dati da inviare al server. Può essere anche passata una stringa come dato. Quando è utilizzata una stringa i dati sono passati tramite il metodo GET, se invece si usa il formato chiave/valore allora il metodo utilizzato è il POST. | |
| callback (opzionale) | Callback | Funzione richiamata quando la chiamata AJAX è completata, anche se non ha successo. Ha tre parametri: la risposta, lo stato e l'oggetto XMLHttpRequest. La callback può anche essere utilizzata senza paramentri se questi non servono. Es: function (responseText, textStatus, XMLHttpRequest). |
Vediamo un esempio costituito dal file HTML contenente la chiamata "chiamante.html" e il file chiamato "remoto.php".
File "chiamante.html":
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery - Test funzione load()</title>
<script type="text/javascript" src="/scripts/jquery/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a#ancoraAjax").click(function(){
$("div#contenutoAjax").load(
"remoto.php",
{numero: 10, stringa: 'pippo'},
function(){
alert('dati caricati');
});
});
});
</script>
</head>
<body>
<a id="ancoraAjax" href="#">mostra</a>
<div id="contenutoAjax"></div>
</body>
</html>
Il file "chiamante.html", attraverso la funzione $(...).load(...) effettua una chiamata ajax al file "remoto.php" passandogli due valori (in formato chiave/valore), inserisce nel div "contenutoAjax" il contenuto html che riceve in risposta e alla fine esegue la funzione "alert" che avverte che i dati sono stati inseriti.
File remoto.php:
<? $stringa = $_REQUEST["stringa"]; $numero = $_REQUEST["numero"]; echo '<p>hello mondo<br />Stringa:'.$stringa.'<br />Numero:'.$numero.'</p>'; ?>Il file "remoto.php", una volta chiamato legge i parametri passati in modalità post (in quanto passati in formato chiave/valore) e crea il codice html da restituire alla chiamata.
La guida ufficiale può essere consultata all'indirizzo http://docs.jquery.com/Ajax/jQuery.ajax
Nessun commento:
Posta un commento