Come passare variabili e dati dal PHP al JavaScript

Immagina di avere una variabile PHP e vuoi passarla al tuo codice JavaScript. Come fare? Lo scopriamo assieme in questo articolo!

Ciao mi chiamo Lorenzo Neri e sono un informatico: realizzo contenuti per aiutare le persone a padroneggiare l’arte del nuovo millennio, ovvero l’informatica!

Devi sapere che questo blog l’ho creato con l’intenzione di raccogliere tutti quei problemi che ho avuto durante la mia vita lavorativa: no tranquillo! Non parlo di problematiche personali 😀

Sto parlando però di tutta quella serie di problemi che riguardano la programmazione e, in questo caso, PHP e JavaScript.

Proprio a riguardo di loro due, di problemi me ne hanno causati parecchi: al punto tale da creare una categoria per ciascuno sul blog che trovi qui per PHP e qui per JavaScript.

E se sei qui è perché vuoi capire come risolvere il maledettissimo problema di passare variabili e dati dal PHP al Javascript: perciò, permettimi di accompagnarti in questa avventura!

Immaginiamo di avere questo scenario, rispettivamente in PHP:

<?php 
   $variabilePHP = "Contenuto variabile";
?>

E in JavaScript abbiamo un punto del nostro codice in cui la variabile PHP è necessaria:

<script>
   variabileJavaScript = <?php $variabilePHP ?>
</script>

… Ma fammi indovinare: non funziona vero?

Diciamo pure che, senza scendere in un tecnichese troppo scellerato, abbiamo diversi modi per passare una variabile, o comunque dei dati dal codice PHP a quello JavaScript.

Esiste un modo più giusto o più sbagliato? Iniziamo!

Usare AJAX per passare le variabili e dati dal PHP

In questo caso staremmo utilizzando il codice PHP come una API vera e propria.

Quali sono i pro di usare AJAX? Che la logica fra front-end e back-end è separata prima di tutto.

Questo significa che, se in futuro non vorrai più passare queste variabili dal PHP al Javascript, ma vorrai usare altri linguaggi di programmazione, le due parti si possono cambiare!

In questo modo è tutto più leggibile. Così facendo, non avrai la necessità di mischiare i due linguaggi di programmazione.

Tuttavia, non tutto è oro ciò che luccica e purtroppo ci sono dei contro in tutto ciò.

Siccome si tratta di separare la logica dell’applicazione e renderla un servizio asincrono a tutti gli effetti, purtroppo abbiamo un po’ di latenza in più.

Eh sì, dobbiamo aspettare la risposta, ma non solo: dobbiamo verificare che anche lo stato della risposta sia positivo.

Vediamo però, come implementare il passaggio di variabili dal PHP al JavaScript grazie ad AJAX.

Parte “server”:

<?php
   $variabilePHP = "Contenuto variabile";
   echo json_encode($variabilePHP);
?>

Fine, rapido semplice ed immediato.

Parte “client”:

<script>
    var richiesta = new XMLHttpRequest(); // Creiamo un nuovo oggetto per lanciare 
    le richieste
    richiesta.onload = function() {
        // Qui è dove gestirai la risposta dal lato server
        // I dati provenienti dal server sono contenuti this.responseText
        alert(this.responseText); //
    };
    richiesta.open("get", "server.php", true);
    //                               ^ Serve a non bloccare l'esecuzione.
    //                                 Non aspettare finché la richiesta non 
                                       termina.
    richiesta.send();
</script>

… Ma sai che secondo me viene anche più bello con jQuery tutto ciò? 😀

Stampare il contenuto nel DOM e prenderlo con JavaScript

Questo secondo metodo ci permette di prendere le variabili PHP e “sbatterle” direttamente nel DOM del nostro documento.

Questa modalità è molto più semplice, diretta ed immediata, tuttavia ha i suoi contro.

Il primo, è quello che non avremmo se separassimo le due cose: il codice è mischiato.

Ma non solo: è veramente un casino avere dati strutturati. Mi spiego meglio: i dati che vengono passati dal PHP devono essere HTML valido, altrimenti devi tu stessi convertirli in stringhe.

Facciamo anche qua un esempio pratico, a questo giro di file ne basta uno solo:

<div id="tagPHP" style="display: none;">
    <?php
        $variabilePHP = "Contenuto variabile";
        echo htmlspecialchars($variabilePHP); 
    ?>
</div>
<script>
    var div = document.getElementById("tagPHP");
    var datiDalPHP = div.textContent;
</script>

… Se ci fai caso, ho nascosto la visibilità e di fatto da questo capisci che la sicurezza di questo metodo non è proprio il top.

Vediamo l’ultimo che è anche il più semplice!

Stampare le variabili PHP nel JavaScript

Quest’ultimo metodo che vediamo per passare variabili e dati dal PHP al JavaScript è il più diretto.

var variabileJavaScript = <?php echo json_encode($variabilePHP, JSON_HEX_TAG); ?>;

Ovviamente non ti scordare l’ultimo punto e virgola!

E non ti scordare tra l’altro di farmi sapere se questo articolo ti è stato utile!

Hai tre modi: con un commento qui sotto, condividendo l’articolo con chi pensi che gli possa essere di aiuto oppure iscrivendoti alla mia newsletter! 😀