Stavolta parliamo delle librerie javascript JQuery, probabilmente una delle invenzioni più interessanti dopo la ruota e le orecchiette con le cime di rape. In particolare vediamo un esempio su come utilizzare la funzione $.ajax().
L'esempio che andremo ad analizzare sarà quello di chiamare uno script php su server passandogli qualche parametro e di visualizzare i risultati nella stessa pagina di partenza, all'interno di una opportuna sezione DIV. Tra i tag HEAD andiamo innanzitutto ad includere le librerie jquery, di seguito andiamo a definire la funzione loadContent().
LoadContent accetta in questo caso in input due parametri, a e b che passerà subito a $.ajax() attraverso il parametro "data" in modo da ricostruire la coppia "nome=valore" separata da & che vediamo quando passiamo i parametri attraverso l'URL. Va inoltre specificato il tipo (GET oppure POST) e l'url, ossia il persorso dello script da chiamare. Se l'esecuzione dell' script si conclude con successo, allora si potrà inviare il messaggio di output (msg) al DIV avente l'id result specificando che si tratta di un messaggio html
<head>
<script src="path-to/jquery-1.2.3.js" type="text/javascript"></script>
<script type="text/javascript">
function loadContent(a, b) {
$.ajax({
type: "POST",
url: "test.php",
data: "a="+a+"&b="+b,
success: function(msg){
$("#result").html(msg);
}
});
}
</script>
</head>
$("#result").html(msg)Vediamo ora come viene scritto il FORM.All'interno del FORM abbiamo due textbox per l'acquisizione dell'input. (Ovviamente si poteva utilizzare una selectbox, un radiobutton o qualunque altra cosa prevista). All'evento onclick associato al bottone di tipo button associamo la chiamata della funzione loadContent a cui passiamo i due valori acquisiti.
<FORM NAME="search">
<input type="text" size="10" value="" name="input1">
<input type="text" size="10" value="" name="input2">
<input type="button" onclick="loadContent(input1.value, input2.value)" value="Click HERE">
</FORM>
<div id="result">
</div>
Il risultato dovrebbe apparire all'inerno della sezione DIV con id result. Buon divertimento!
Vincenzo Patruno
Nessun commento:
Posta un commento