whatsapp
keyboard_arrow_down Contatti

Sabato

04

Novembre 2023

Come fare chiamate Ajax a Php in modo corretto

Come fare chiamate Ajax a Php

  1. blog Come fare chiamate Ajax a Php
event_available
schedule

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:

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:

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...
});

Ariadne's Arts

Shop Online di Spiritualità e Cristalli

Bracciale feng shui pixiu Drusa in ametista Incenso angel protection Pirite grezza Bracciale in occhio di tigre
Visita lo Shop

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.

Ti è piaciuto questo articolo?

favorite thumb_down
Autore articolo

Fabio

Sono un terribile realista. Pratico e determinato ma anche un grande sognatore, ecco perché do continuamente vita a nuovi progetti online e non. Nel 2019 ho fondato Eureka Web proprio per rendere possibile tutto questo. Insieme possiamo realizzare la tua idea!


Visita il sito
library_books

Leggi anche

Come inviare dati dei form con Ajax serialize() a php
Scopri
Come usare le chiavi API Google
Scopri
Come unire file Javascript e CSS in WordPress
Scopri

Contattami

perm_identity
alternate_email
phonelink_ring
message

Il tuo messaggio è stato inviato con successo!
Ti risponderemo a breve

Scrivi un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

message
perm_identity
alternate_email

keyboard_arrow_up