Nella scorsa lezione, abbiamo visto il metodo .load(). In questa lezione, vediamo come funzionano i metodi .get() e .post() di jQuery per le richieste Ajax.
GET e POST sono due tipi di richieste Ajax. Vediamo le differenze:
Il metodo .get() viene utilizzato per eseguire richieste GET con Ajax. Ha la seguente sintassi di base:
$.get(url, dati, funzione, tipoDati). I parametri sono:
Vediamo un esempio: abbiamo un file PHP che recupera il nome e stampa la scritta "Benvenuto, nome!".
<?php
// Ricevi il nome dal parametro GET
$nome = $_GET['nome'];
// Elabora una risposta
$risposta = "Benvenuto, $nome!";
// Restituisci la risposta al client
echo $risposta;
?>Possiamo mandare il nome e ricevere una risposta dalla pagina saluto.php in questo modo:
<div id="risposta"></div>
<script>
$(document).ready(function() {
// Nome da inviare alla pagina PHP
var nome = "Andrea";
// Effettua una richiesta GET al file PHP
$.get("saluto.php", { nome: nome }, function(data) {
// La risposta dal server deve essere inserita nella pagina
$("#risposta").text(data);
});
});
</script>Nell'esempio, utilizziamo .text() per inserire la risposta nel <div>. Se non lo conoscevi, puoi leggere la lezione Cambiare il contenuto degli elementi.
Il metodo .post() viene utilizzato per eseguire richieste POST con Ajax. Ha una sintassi simile a .get():
$.post(url, dati, funzione, tipoDati). I parametri da usare sono:
Vediamo un esempio: l'utente inserisce la propria email in un form HTML. Il file PHP utilizza l'email per salvarla in un database:
<?php
// Riceve l'email dal parametro POST
$email = $_POST['email'];
// Salvataggio dell'email nel database...
// Elabora una risposta
echo "L'email $email è stata salvata";
?>Possiamo inserire la un'email e ricevere una risposta dalla pagina salva_email.php in questo modo:
<label for="inputEmail">Inserisci l'Email:</label>
<input type="text" id="inputEmail">
<button id="inviaEmail">Invia Email</button>
<div id="risposta"></div>
<script>
$("#inviaEmail").on("click", function() {
// Recupera l'email dall'input
var email = $("#inputEmail").val();
// Effettua la richiesta AJAX usando il metodo .post()
$.post("salva_email.php", { email: email }, function(data) {
// Inserisci la risposta nel div
$("#risposta").text(data);
});
});
</script>Nell'esempio, possiamo recuperare il contenuto dell'input utilizzando il metodo .val(), che abbiamo visto nella lezione su come recuperare il contenuto degli elementi.
Nota: PHP è un linguaggio lato-server, quindi è necessario un server perché funzioni correttamente.