Sabato
04
Novembre 2023
Come fare chiamate Ajax a Php in modo corretto? Se vuoi gestire l’input dell’utente, passare parametri a Php evitando il caricamento della pagina allora questa è la guida che fa al caso tuo!
Vedrai infatti:
Con questo metodo potrai sfruttare tutti i vantaggi di php, un linguaggio di programmazione per il web lato server e la dinamicità di Javascript, per intercettare le interazioni e gli eventi degli utenti. Le chiamate Ajax sono spesso usate per:
Iniziamo subito:
Prima di iniziare dovrai installare correttamente la libreria di jQuery, disponibile sul sito ufficiale a questo link:
Per farlo hai due strade possibili:
<!-- jQuery da risorsa esterna -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<!-- jQuery scaricato e aggiunto nei file del tuo sito -->
<script src="percorso-tuo-file-jquery.js"></script>
Ora non ti resta che:
<!-- Includi il tuo file .js -->
<script src="percorso-tuo-file.js"></script>
Se utilizzi WordPress puoi includere il tuo file .js utilizzando la funzione wp_enqueue_script(), in questo modo:
add_action('wp_head', function() {
wp_enqueue_script('nome-handle', 'percorso/tuo/file.js');
});
Tutto il codice visto in precedenza va inserito all’interno del file che stai modificando, opportunamente incluso nel file functions.php di WordPress, oppure direttamente nel file functions.php:
/* file functions.php */
include "percorso/tuo/nuovo/file.php";
Tutte le modifiche a questo file però vengono sovrascritte ad ogni aggiornamento del tema, quindi la soluzione è creare un tema child.
I temi child hanno la stessa struttura dei temi normali ed ereditano tutti i file del tema genitore. Dovrai creare un file functions.php all’interno del tuo tema child ed inserire lì il codice.
Altre possibili soluzioni sono:
Se hai già scritto del codice, puoi sfruttare anche file diversi da functions.php, con la funzione add_action() e l’hook “wp_head”.
add_action('wp_head', function() {
// code...
});
Ora veniamo al dunque: per effettuare chiamate Ajax a Php ti servirà questo codice da inserire nel file javascript che hai creato.
Nell’esempio sottostante svolgeremo queste azioni:
/* nel file.js appena creato */
$(document).on('click', '#id_mio_pulsante', mia_chiamata_ajax);
/* attivo la funzione al click di un pulsante */
function mia_chiamata_ajax() {
var mia_variabile_1 = 5; //dichiaro una variabile da passare a php
var mia_variabile_2 = "Test";
var mia_variabile_3 = false;
$.ajax({
type: "POST",
url: "#", //oppure ne specifico il percorso
data: {
/*dati da passare */
nome_variabile_post_1: mia_variabile_1,
nome_variabile_post_2: "true", /* posso anche inserire valori */
nome_variabile_post_3: var mia_variabile_3
},
success: function(response){
/* "response" contiene il codice HTML di tutta la pagina */
var content = $('<div />').append(response).find("#element").html();
/** ora la variabile content contiene
* solo il blocco HTML che ci interessa.
* Questo è utile per generare messaggi
* di risposta da php
*/
console.log(content);
// resto del codice in caso di successo della chiamata
},
error: function(xhr, status, error){
// gestisci l'errore
console.log(error);
// resto del codice in caso di errore della chiamata
}
}); // fine ajax
} // fine funzione mia_chiamata_ajax()
Vediamo ora nel dettaglio le porzioni di questa funzione Ajax:
Vediamo ora il codice php che dovrà ricevere la chiamata Ajax, elaborare le richieste al server e restituire i risultati.
In questo esempio vedremo:
if (isset($_POST['nome_variabile_post_1'])) {
/** usando if(isset()) possiamo eseguire il codice php
* solo durante la chiamata Ajax, ovvero al click dell'utente,
* altrimenti il codice verrebbe eseguito al caricamento della pagina
*/
/* dichiaro le variabili contenenti i dati passati da Ajax */
$var_1 = $_POST['nome_variabile_post_1'];
$var_2 = $_POST['nome_variabile_post_2'];
$var_3 = $_POST['nome_variabile_post_3'];
// ora eseguo il resto del codice
/* <div id="response"> verrà rimandato ad Ajax in caso di successo */
?>
<div id="response">
<p>Operazione eseguita con successo</p>
</div>
<?php
}
Ajax è in grado di filtrare il messaggio di risposta anche in formato HTML e poi manipolarlo a piacimento. Il <div> creato da php potrà ora essere inserito dinamicamente (con Javascript) all’interno della pagina e il codice che ti permetterà di farlo è:
...
var content = $('<div />').append(response).find("#response").html();
/** ora la variabile content contiene
* solo il blocco HTML che ci interessa.
* ovvero il paragrafo interno a <div id="response">
*/
...
Fai attenzione perché questa funzione non ricarica la pagina web e quindi non aggiorna in automatico il Php.
Se vuoi stampare a video i risultati ottenuti dalla chiamata Ajax dovrai utilizzare la manipolazione del DOM da parte di jQuery o Javascript.
Per questo può esserti utile la funzione this. di Javascript, $(this) di jQuery e il parametro “response” passato nella funzione success di Ajax.
Scrivi un commento