Sabato
04
Novembre 2023
Come fare chiamate Ajax a Php
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:
- Come usare Ajax in modo corretto con jQuery
- Come effettuare chiamate Ajax a Php
- Come passare parametri da Javascript a php con Ajax
- Come stampare a video il contenuto tramite php
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:
- Inviare dati dei moduli di contatto
- Recuperare dinamicamente dati dal database di WordPress
- Creare alert e messaggi di errore per i moduli di contatto
- Visualizzare PDF dinamici sul tuo sito web
- Creare moduli per recensioni dinamiche
Iniziamo subito:
Come usare Ajax in modo corretto
Prima di iniziare dovrai installare correttamente la libreria di jQuery, disponibile sul sito ufficiale a questo link:
Per farlo hai due strade possibili:
- Scaricare la libreria più recente e includerla nei file del tuo sito web
- Installarla richiamandola esternamente con questo codice HTML
<!-- 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:
- Creare un file “tuo-file.js” e inserirlo all’interno dei file del tuo sito
- Includere il tuo nuovo file nel codice HTML
- Se salta fuori l’errore “$ is not a functions” puoi correggerlo seguendo questa guida.
<!-- 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');
});Dove inserire il codice
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:
- Scrivi il tuo codice nel file functions.php, nella cartella principale del tema attivo
- Oppure crea un nuovo file includendolo nel file functions.php, in questo modo:
/* 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:
- Creare un plugin (scelta consigliata solo se hai tante altre funzionalità da aggiungere)
- Creare un tuo tema (non child)
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...
});
Come fare chiamate Ajax a Php, il codice .js
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:
- Un pulsante creato in HTML attiverà la chiamata Ajax
- Per risolvere l’errore “Errore event listener (“click”)” abbiamo agganciato l’evento (click) al DOM (document)
- Creo 3 variabili con il contenuto da passare a php
- Creo una richiesta Ajax di tipo “Post”
- Gestisco la risposta in caso di successo della chiamata
- Gestisco gli eventuali errori
/* 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:
- $.ajax({ /* code */ }); – Indica l’inizio della chiamata ajax
- type: Indica il tipo di metodo da utilizzare per passare i parametri, GET o POST
- url: Indica l’url del file .php in cui risiede il codice a cui passare i parametri della chiamata.
Se indichi “#”, come nel nostro esempio, il file .php dovrà gestire il render della pagina che stai visualizzando.
Attenzione ai file in localhost perchè dovrai specificare il percorso del file nel tuo pc (C://…) invece dell’url classico (http://localhost/…) - data: sono i dati da passare a .php. Puoi passare stringhe, array, numeri e persino porzioni di codice HTML.
- success: indica le azioni da eseguire nel caso in cui la chiamata abbia succeso, ad esempio un messaggio per l’utente di completamento della funzione.
Molto importante è la variabile “response” che contiene la risposta della chiamata, ovvero il codice HTML con le funzioni php già eseguite. - error: indica le azioni da eseguire in caso di errore della funzione.
Come fare chiamate Ajax a Php, il codice .php
Vediamo ora il codice php che dovrà ricevere la chiamata Ajax, elaborare le richieste al server e restituire i risultati.
In questo esempio vedremo:
- La variabile Superglobale “$_POST” per ricevere i dati da Ajax
- Come recuperare tutte le variabili passate con “data:” da Ajax
- Come creare un messaggio di risposta da rimandare ad Ajax
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
}
Come mostrare a video i risultati
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