jQuery e AJAX – Chiamate asincrone con semplicità

Con AJAX e JAVASCRIPT la trafila è abbastanza lunga e poco intuitiva. Con jQuery le cose si fanno più chiare e semplici.

La funzione è la seguente:

$.ajax({
     type: "POST",
     url: "salva.php",
     data: "var=valorevar",
     success: function(msg){
          alert( "Dati salvati: " + msg );
     }
});

Così facendo si fa una chiamata asincrona alla pagina salva.php (in questo esempio facciamo si che vengano inviati valori ad una pagina e venga recuperata la risposta). Si passano i valori alla pagina salva.php tramite “data:“; in questo caso passiamo la variabile “var” che avrà come valore: “valorevar“. Nella pagina salva.php basterà fare un semplice $_POST['var'] per recuperare la variabile inviata tramite POST (ovviamente una volta ottenuti i valori si utilizzano come normali variabili, quindi si potranno salvare in un database, inviare email, salvarli in un file e via discorrendo). Per inviare più variabili basterà unirle con “&” (var=valorevar&var2=valorevar2).

Fino a qui nessun problema. Ora sorgono due quesiti: recuperare la risposta dalla pagina di salvataggio e  inviare valori dinamicamente dalla stessa pagina.
Ci sono molte guide online che dicono come inviare tutte le variabili inserite in un form, ma se dovessimo avere ad esempio una lista della spesa e dovessimo cliccare su un pulsante per indicare quali prodotti sono stati acquistati, come facciamo? Escludendo chiaramente un qualsiasi form.

Ci ho pensato un pò e, non trovando guide anche se di sicuro ci sono e non le ho viste, ho pensato che fosse ottimo usare una funzione da richiamare sull’evento onClick.
Ecco la funzione “salva()“:

function salva(variabile){
     $.ajax({
          type: "POST",
          url: "salva.php",
          data: "var=valorevar&var_spesa=" + variabile,
          success: function(msg){
               alert( "Dati salvati: " + msg );
          }
     });
}

In questo caso la variabile “var_spesa” in “data” è uguale alla variabile “variabile“, recuperata dalle parentesi tonde della funzione salva(variabile).
Per chi mastica un pò di javascript sarà prassi ma per chi non lo dovesse sapere, per richiamare questa funzione che invierà in modo asincrono i dati alla pagina salva.php, basterà aggiungere al pulsante dell’acquisto, che per noi ora sarà un semplice div, l’evento onClick con la funzione appena creata. Ecco il codice:

<div onClick="salva('spaghetti')">Comprato?</div>

In questo modo alla pressione della scritta “Comprato?” verrà richiamata la funzione salva() e passato il valore dell’oggetto comprato, ovvero “spaghetti“.
Si può usare anche un echo in php che scriverà in modo dinamico per ogni campo il nome (o l’id o quello che volete) dell’alimento:

<div onClick="salva(<?=$nome_alimento_da_database?>)">Comprato?</div>

Fatto! Ultimo punto è come recuperare valori dalla pagina salva.php dopo l’invio.
Personalmente trovo più intuitivo sostituire in toto un pezzo di codice magari di un div con i nuovi risultati ma in questo caso creeremo un avviso che indicherà il valore della variabile “var” passata tramite POST in modo asincrono.
Le ultime righe del codice non le avevo spiegate per farlo ora in modo più approfondito.

Come vedete anche qui c’è una funzione che agisce quando la pagina “salva.php” viene messa in mezzo, recupera tutto quello che la pagina ha stampato a video (spiego meglio tra un attimo) e la mostra in una finestra di avviso ( alert() ).
Quindi se dovete aggiungere un nuovo div o modificare un campo esistente, potete usare jQuery per farlo, sostituendo quello che si trova in un determinato campo con quello che riceve la nostra funzione salva():

Pagina salva.php:

$var=$_POST['var'];
//usa la variabile come ti pare
echo $var;

In questo modo verrà ricevuto dalla nostra pagina il valore inviato tramite AJAX, nella riga “data:” dove c’è var=var_spesa.
Quindi la pagina riceverà come risposta la stringa “var_spesa”, la invierà alla riga “success:” della funzione ajax e creera un alert (finestra di avviso) con scritto:

Dati salvati: var_spesa

Più semplice a farsi che a dirsi.

Annunci
  1. #1 di Gas il 18/02/2011 - 16:46

    Ciao !
    Questa tua guida mi è stata davvero utilissima per cominciare a capire qualcosa di ajax !

    Grazie mille !

    Matteo

  2. #3 di tegatti il 02/05/2012 - 10:14

    Salve, vorrei prendere spunto dal tutorial per risolvere un problema che da un pò di tempo mi assilla e che ti descrivo:
    ho una pagina php che simula il registro del docente. All’inizio, dopo controlli e istruzioni sql, determino la o le materie di insegnamento e le sue classi. Fin qui tutto bene, viene visualizzato l’elenco della classe e una griglia dove vengono riportati i provvedimenti per ogni studente in base al giorno del mese, come valutazioni, ritardi, assenze, impreparato, ecc. Il problema inizia quando si seleziona il mese di riferimento, il giorno e le ore di lezioni da tre distinte select. A questo punto il refresh della pagina mi azzera e variabili che mi servono per eseguire un’istruzione sql che vada ad inserire o aggiornare la tabella del database.
    Ho provato con tre distinte chiamate ajax (non ho tanta esperienza in merito) ma non mi funziona.
    Per favore, potresti aiutarmi?
    Grazie in anticipo

    • #4 di portapipe il 02/05/2012 - 10:20

      Potrei aiutarti. Ovviamente così ho un’idea molto generale del sistema così come del problema.
      Se vuoi/puoi possiamo parlarne sul forum (link nel menù) poiché è un discorso un pò lungo 🙂

  3. #5 di tegatti il 02/05/2012 - 11:59

    Ti ho scritto sul forus (almeno spero di non aver sbagliato), però il messaggio è stato troncato. Come fare? Te lo rinvio all’indirizzo e-mail del “blog di portapipe”?
    Ciao

  4. #7 di tegatti il 02/05/2012 - 15:04

    Portapipe, hai ricevuto il messaggio su forum come richiesto?

    • #8 di portapipe il 02/05/2012 - 16:44

      Si 🙂
      Ho dato una letta veloce.
      Appena ho tempo ti rispondo 😉

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...

%d blogger hanno fatto clic su Mi Piace per questo: