Come passare variabili e dati dal PHP al JavaScript

di Lorenzo Neri
610 visualizzazioni

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! 😀

Continua a scoprire di più con questi articoli!

25 commenti

Sergio 06/10/2021 - 12:29

Ciao Lorenzo, sto impazzendo per ottenere risposte da un file php che esegue query in un db mysql.
Non riesco a capire cosaci sia di diverso tra il tuo script e quello che ho modificato secondo le mie necessità.
Questa la parte javascript:
alert(phpRun(“/home/sysop/getevent.php”));
e questa la parte ajax che dovrenne richiamare lo script:
function phpRun(element){
var xhr = new XMLHttpRequest();
xhr.onload = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
alert(this.responseText);
}
};
xhr.open(‘get’, element,true);
xhr.send()
}
Il problema è che quando faccio l’alert dell’output dello script php, invece che darmi l’uscita della query mi da lo script del php e non so perchè.
Questa la parte finale dello script php che se chiamato da terminale funziona a dovere.

if ($result -> num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
echo json_encode($row[“code”] . “|” . $row[“date”] . “|” . $row[“latitude”] . “|” . $row[“longitude”] . “|” . $row[“depth”] . “|” . $row[“magnitude”] . “|” .$row[“locality”] . “|” . $row[“created”]);
}
} else {
echo json_encode(“”);
}

Rispondi
Lorenzo Neri 06/10/2021 - 14:51

Ciao Sergio, grazie del tuo commento!

Ti dà lo script del PHP nel senso che ti dà in output il codice che mi hai incollato?
Sei sicuro che l’URL che hai passato al Javascript sia quello che lui stesso vede come corretto per l’indirizzo dello script PHP che stai chiamando?

Rispondi
Sergio 07/10/2021 - 08:41

Ciao Lorenzo, grazie per la risposta.
No, proprio lo script del php.
Mi è venuto in mente che la chiamata al programma da javascript, manca del parametro php.
Ora provo a vedere cosa succede inserendo, prima del nome del programma, “php”.

Rispondi
Sergio 07/10/2021 - 08:48

No, non mi da nulla.
Tornando alla discussione precedente, in pratica nel richiamare la funzione da javascript, do il comando
alert(phpRun(“/home/sysop/getevent.php”));
e nel comando ajax c’è

alert(this.responseText);

e quello che vedo nel browser prima mi da la chiamata da java con “undefined”, e poi quello da ajax con il listato dello script (per maggiore sicurezza, ho inserito un alert immediatamente prima dell’alert(this.responseText).

Rispondi
Lorenzo Neri 07/10/2021 - 11:37

Ciao Sergio, il problema credo sia dato dal fatto che il percorso che hai impostato per l’URL PHP non sia valido. Fai una prova: metti nella stessa cartella lo script javascript e quello PHP per vedere se la chiamata avviene correttamente, ma nella chiamata a funzione, anziché impostare “/home/sysop/getevent.php” metti semplicemente “./getevent.php”.

Fammi sapere, ci tengo!

Rispondi
Sergio 07/10/2021 - 16:55

Ciao Lorenzo,
ho provato come mi hai detto, ma non è cambiato nulla.
Ora volgio vederlo quando lo inserisco nella pagina dove gira l’html con php ecc, poi ti faccio sapere

Rispondi
Sergio 07/10/2021 - 16:57

No, non va comunque…

Rispondi
sergio 07/10/2021 - 17:11

Ok, mi ero sbagliato. Finalmente sono riuscito a far girare lo script php ed a produrre un output.
Questo probabilmente perchè il php non funziona all’esterno di cartelle predeterminate, (ma se mettevo php prima del nome dello script come una richiesta in linea non era uguale?)
Il problema però è che ora, con l’echo che scrivo in php, apre una finestra come l’alert di javascript. Come posso passare questo output ad una variabile?

Rispondi
sergio 07/10/2021 - 19:38

Ci sono riuscito!!!!
Dopo aver trasportato il tutto su una directory in cui poteva lavorare php (giustamente per sicurezza lato server non può lavorare da tutte le parti… ammazzate oh!) sono riuscito a riprendere i dati e memorizzarli in una variabile.
In pratica, nella funzione di chiamata al php, ho impostato una variabile all’interno della funzione, che poi valorizzo con response.Text.
Fatto ciò, il ritorno non poteva avvenire subito dopo , ma alla fine della funzione.
Un altro problema che incontravo era che usciva quando ancora lo script di php non aveva finito l’elaborazione. E’ bastato mettere false nella open del post e tutto funziona a meraviglia.
Questa la funzione che ho fatto:

// gets an XMLHTTP request object
function createRequestObject() {
var ro;

if (window.XMLHttpRequest){
ro=new XMLHttpRequest();
} else {
ro=new ActiveXObject(“Microsoft.XMLHTTP”);
}

return ro;
}

function phpRun(element,request){
var return_func;
var xhr = new createRequestObject();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
return_func = this.responseText;
}
};
xhr.open(‘POST’, element,false);
xhr.send(request.value)
return return_func;
}

Rispondi
sergio 07/10/2021 - 20:20

No, non va secondo le mie aspettative.
Quando da javascript richiamo il file PHP, questo dovrebbe fare una ricerca in un database in base ad alcuni parametri che gli passo.
Ho provato ad inserire, nella stringa che richiama lo script PHP, una query in mysql (nel caso specifico è ‘SELECT * FROM tabella WHERE code = “OB2021jmpcds”;’.
Utilizzando firefox con ‘strumenti di sviluppo web’, se io aggiungo questa riga mi da questo errore:

Uncaught TypeError: phpRun(…) is undefined

All’interno delllo script PHP, sono riuscito a gestire gli argomenti passati tramite la variabile $argv e, da terminale se do questa informazione me la restituisce normalmente

Rispondi
Lorenzo Neri 08/10/2021 - 08:08

Buongiorno Sergio,

Intanto mi fa piacere che tu sia riuscito a portarti avanti con la risoluzione dei problemi!

Tuttavia noto che c’è ancora un pezzo che non funziona troppo bene a livello di comunicazione. Prova a fare così: riesci a mettermi il tuo codice su un pastebin così da capire meglio con il codice ben indentato? https://pastebin.com/

Grazie, a presto!

Rispondi
Sergio 08/10/2021 - 10:33

Buongiorno Lorenzo,
ho visto il sito, ma non ho capito come funziona, come fare per poterlo passare a te

Rispondi
Lorenzo Neri 08/10/2021 - 10:48

Qui trovi specifiche in merito: https://www.youtube.com/watch?v=y64dIhyU44c

Rispondi
Sergio 08/10/2021 - 10:57

Mi sono segnato a pastebin, ed ho anche caricato gli script, ma ora non so come renderli pubblici perchè tu possa vederli

Rispondi
sergio 08/10/2021 - 13:49

Fatto..

Rispondi
Lorenzo Neri 08/10/2021 - 13:56

Ciao Sergio, senza link mi viene difficile trovarli…

Rispondi
sergio 08/10/2021 - 14:24

Credo che questo non vada bene, ma ci provo
https://pastebin.com/u/SergioT59

Rispondi
sergio 08/10/2021 - 14:27

Non so come renderli visibili agli altri

Rispondi
sergio 08/10/2021 - 14:46

Sono uscito da pastebin e rientrato senza fare il login. Quel link dovrebbe funzionare

Rispondi
Lorenzo Neri 08/10/2021 - 14:51

Anziché fare “if (count($argv) !=2 )” prova semplicemente a fare “if (isset($_GET[“search”])”

Rispondi
sergio 08/10/2021 - 14:59

Bene, vedo con piacere che sono riuscito a farti vedere il codice…

Rispondi
sergio 08/10/2021 - 15:02

Hai capito cosa intendo fare?

Rispondi
sergio 08/10/2021 - 15:07

No, non funziona

Rispondi
Lorenzo Neri 09/10/2021 - 15:25

Salve Sergio, in questa situazione penso che l’unica cosa sia quella di pianificare una consulenza specifica perché non riesco ad aiutarti così.

Se hai piacere, possiamo sentirci via mail: hello@lorenzoneri.com

Sentiamoci lì per organizzarla, grazie!

Rispondi
sergio 09/10/2021 - 23:19

Ciao Lorenzo,
dopo molti tentativi sono riuscito a capire perchè non andava..
Il problema era nel passaggio dallo script AJAX verso PHP.
Per poter funzionare il metodo $_GET del PHP, bisogna passare la richiesta tramite l’open del post, inserendo, dopo la richiesta del file, il carattere ‘?’ seguito dalla richiesta che deve operare.
In pratica la riga dell’open deve diventare una cosa del genere:

./getevent.php?search=SELECT * FROM shakeEvents WHERE code = \”OB2021jmpcds\”;

a questo punto il metodo get ritrova la parola chiave search e ne estrae il contenuto dopo il carattere ‘=’ e, fatta l’estrazione dal database, la restituisce tramite il comando echo del php.

Grazie ancora del tempo prezioso che mi hai dedicato e spero che questo possa essere d’aiuto per qualcun’altro.

Rispondi

Lascia un commento

Questo sito potrebbe fare uso di cookie e siccome l'UE mi obbliga a fartelo presente, eccoti il classico banner dove puoi decidere come gestirli. Accetta Leggi di più