Javascript e Ajax per aggiornare una pagina senza ricaricarla.
Supponiamo di avere una pagina, che nel nostro esempio scriviamo ovviamente solo nelle linee essenziali, come quella che indichiamo qui di seguito.
<!DOCTYPE html> <html> <head> <title></title> <script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script> </head> <body> <div> <form> <div> <label for "_tit" style="margin-left:10px;">Titolo</label><br> <input style="width:300px;" type="text" id="_tit" name="_tit" value=''> </div> <div> <button type="button" onclick="submitForm();">Ricerca</button> </div> </form> <div> <ul id="lista_sel" style="background:#f4f4f4;padding:20px 10px; margin:30px 20px;"> </ul> </div> </div> </body> </html>La pagina nel nostro banale esempio si presenterà così Abbiamo volutamente preparato una semplicissima pagina html, ma ovviamente maggiore è la complessità della pagina o la grandezza del database, maggiore sarà il vantaggio in termini di velocità che ne deriverà. Il richiamo della libreria jquery ci serve perché utilizzata dallo script javascript che andremo ad inserire. Come potete notare abbiamo inserito un blocco ove andremo a mostrare i risultati della ricerca, che inizialmente è vuoto e quindi non viene visualizzato. Lo script php che legge il database lo chiameremo _loaddb.php e accetterà il titolo (o parte di esso) come parametro GET. Andrà registrato come programma separato e richiamato con Ajax all'interno di uno script che avrà la seguente struttura:
<script> function submitForm() { var tit=document.getElementById("_tit").value; if (var1!=="") { let listaSel = $('#lista_sel'); lista.empty(); var url = '_loaddb.php?t='+tit; $.getJSON(url, function (data) { $.each(data, function (i, val) { var temp="<li><a href='showdetails.php?id="+data[i].id+"'>"+data[i].title+"</a> ("+data[i].year+")</li>"; listaSel.append(temp); }) }); } } </script>Lo script passa il testo inserito nel form al programma _loaddb.php e riceve in risposta una lista in formato json che andrà ad inserire all'interno del blocco <ul ... </ul> La clear del blocco (lista.empty();) viene inserita nel caso si reiteri il processo con ulteriori richieste. Il link su ciascuna riga della lista ottenuta è verso un ipotetico programma che mostra i dettagli dell'oggetto selezionato. Poiché abbiamo detto di usare json come risultato della ricerca da inserire nella lista, il programma _loaddb.php dovrà terminare con un'istruzione tipo: echo json_encode($recordEstratti); E' tutto. Il programmino nel suo insieme sarà quindi:
<!DOCTYPE html> <html> <head> <title></title> <script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script> </head> <body> <div> <form> <div> <label for "_tit" style="margin-left:10px;">Titolo</label><br> <input style="width:300px;" type="text" id="_tit" name="_tit" value=''> </div> <div> <button type="button" onclick="submitForm();">Ricerca</button> </div> </form> <div> <ul id="lista_sel" style="background:#f4f4f4;padding:20px 10px; margin:30px 20px;"> </ul> </div> </div> </body> <script> function submitForm() { var tit=document.getElementById("_tit").value; if (var1!=="") { let listaSel = $('#lista_sel'); lista.empty(); var url = '_loaddb.php?t='+tit; $.getJSON(url, function (data) { $.each(data, function (i, val) { var temp="<li><a href='showdetails.php?id="+data[i].id+"'>"+data[i].title+"</a> ("+data[i].year+")</li>"; listaSel.append(temp); }) }); } } </script> </html>
-
tags:
Commenti
(Occorre fare login per commentare - Se non sei registrato puoi farlo cliccando su "accedi")