Barra laterale
programmazione:jquery:ajax_con_jquery
Indice
Ajax con Jquery
Autore: Fabio Di Matteo
Ultima revisione: 27/01/2012
Jquery possiede alcuni metodi per realizzare il caricamento di dati con tecniche di tipo ajax ovvero uno scambio di dati in background fra web browser e server, che consente l'aggiornamento dinamico di una pagina web senza esplicito ricaricamento da parte dell'utente.
Lo scenario
Abbiamo index.html con 3 pulsanti che caricano contenuti html presi della pagina test.php. Inoltre passiamo tramite http la variabile valore giusto per dimostrare l'utilita' della tecnica.
Avremmo potuto utilizzare una normale pagina html per la fonte dati ma abbiamo voluto testare il funzionamento con gli script lato server.
In test.php ci sono 2 div #contenitore1 e #contenitore2 . In #contenitore1 ci sta un'immagine e subito dopo viene stampato ,tramite php, il contenuto di una variabile http .
Il metodo principale
Il metodo principale è load e l'utilizzo base per prendere tutto il contenuto della pagina è il seguente:
$('#miodiv').load('pagina.html');
dove #miodiv e' il div che conterra i dati e pagina.html è la pagina fonte dei dati.
qualora invece volessimo prendere solo il contenuto di un div (di pagina.html) ecco la sintassi:
$('#miodiv').load('pagina.html #divdaprendere');
Un esempio pratico
Il codice completo
index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <title>Ajax con Jquery</title> </head> <body> Clicca per caricare completamente la pagina test.php : <button Onclick="$('#lavagna').load('test.php?valore=ciao');">Pagina intera</button><br><br><br> Clicca per caricare soltanto il div con #contenitore1 della pagina test.php : <button Onclick="$('#lavagna').load('test.php?valore=ciao #contenitore1');">solo div #contenitore1</button><br><br><br> Clicca per caricare soltanto il div con #contenitore2 della pagina test.php : <button Onclick="$('#lavagna').load('test.php?valore=ciao #contenitore2');">solo div #contenitore2</button><br><br><br> <div align="center" id="lavagna">al click questo contenuto verra sostituito<br> dal contenuto del file <a href="test.php">test.php</a> </div> </body> </html>
test.php
<?php echo '<div id="contenitore1">Div #contenitore1<br> <img src="Newtux.jpg" border="0" alt=""><br> Il valore e\' -->' .$_GET["valore"] .' </div><br>'; echo '<div id="contenitore2">Div #contenitore2</div>'; ?>
Mostrare un avviso se la richiesta ajax incontra dei problemi
Direttamente dalla guida di jquery:
<script> $("#success").load("/not-here.php", function(response, status, xhr) { if (status == "error") { var msg = "Sorry but there was an error: "; $("#error").html(msg + xhr.status + " " + xhr.statusText); } }); </script>
programmazione/jquery/ajax_con_jquery.txt · Ultima modifica: 18/04/2018 - 15:49 (modifica esterna)
Strumenti Pagina
Ad eccezione da dove è diversamente indicato, il contenuto di questo wiki è soggetto alla seguente licenza: CC Attribution-Share Alike 4.0 International
