Ottieni variabile da PHP a JavaScript

Voglio usare una variabile PHP in JavaScript. Come è ansible?

Puoi stampare la variabile PHP nel tuo javascript mentre la pagina è stata creata.

 

Ovviamente questo è per variabili semplici e non oggetti.

Puoi passare le variabili PHP al tuo JavaScript generandolo con PHP:

   

Penso che il percorso più semplice sia includere la libreria jQuery javascript nelle tue pagine web, quindi utilizzare JSON come formato per passare i dati tra i due.

Nelle tue pagine HTML, puoi richiedere dati dagli script PHP come questo:

 $.getJSON('http://foo/bar.php', {'num1': 12, 'num2': 27}, function(e) { alert('Result from PHP: ' + e.result); }); 

In bar.php puoi farlo:

 $num1 = $_GET['num1']; $num2 = $_GET['num2']; echo json_encode(array("result" => $num1 * $num2)); 

Questo è quello che viene solitamente chiamato AJAX, ed è utile dare alle pagine web un aspetto più dinamico e simile al desktop (non è necessario aggiornare l’intera pagina per comunicare con PHP).

Altre tecniche sono più semplici. Come altri hanno suggerito, puoi semplicemente generare i dati variabili dal tuo script PHP:

 $foo = 123; echo "\n"; 

La maggior parte delle pagine web al giorno d’oggi usa una combinazione dei due.

Dipende dal tipo di variabile PHP che si desidera utilizzare in Javascript. Ad esempio, interi oggetti PHP con metodi di class non possono essere utilizzati in Javascript. Tuttavia, è ansible utilizzare le funzioni JSON (JavaScript Object Notation) PHP per convertire semplici variabili PHP in rappresentazioni JSON. Per maggiori informazioni, si prega di leggere i seguenti link:

  • PHP JSON Manual
  • PHP funzione json_encode
  • PHP funzione json_decode

Puoi generare la rappresentazione JSON della tua variabile PHP e poi stamparla nel tuo codice Javascript quando la pagina viene caricata. Per esempio:

  
    

Questo è il modo più semplice per passare una variabile php su javascript senza Ajax.

Puoi anche usare qualcosa come questo:

 var i = ""; 

Ciò detto per essere più sicuro o più sicuro. credo

Aggiornamento: ho completamente riscritto questa risposta. Il vecchio codice è ancora lì, in fondo, ma non lo consiglio.


Esistono due modi principali per accedere alle variabili GET :

  1. Tramite l’array $_GET PHP (array associativo).
  2. Tramite l’object location di JavaScript.

Con PHP, puoi semplicemente creare un “modello”, che va in questo modo:

  

Tuttavia, penso che la combinazione di lingue qui sia sciatta e dovrebbe essere evitata laddove ansible. Non riesco davvero a pensare a nessun buon motivo per mescolare i dati tra PHP e JavaScript.

Si riduce davvero a questo:

  • Se i dati possono essere ottenuti tramite JavaScript, utilizzare JavaScript.
  • Se i dati non possono essere ottenuti tramite JavaScript, utilizzare AJAX.
  • Se è necessario comunicare con il server, utilizzare AJAX.

Dato che stiamo parlando di $_GET qui (o almeno ho pensato che fossimo quando ho scritto la risposta originale), dovresti farlo tramite JavaScript.

Nella risposta originale, avevo due metodi per ottenere la stringa della query, ma era troppo disordinato e sobject a errori. Quelli sono ora in fondo a questa risposta.

Ad ogni modo, ho progettato una piccola “class” per ottenere la stringa di query (in realtà un costruttore di oggetti, vedere la sezione pertinente dall’articolo OOP di MDN):

 function QuerystringTable(_url){ // private var url = _url, table = {}; function buildTable(){ getQuerystring().split('&').filter(validatePair).map(parsePair); } function parsePair(pair){ var splitPair = pair.split('='), key = decodeURIComponent(splitPair[0]), value = decodeURIComponent(splitPair[1]); table[key] = value; } function validatePair(pair){ var splitPair = pair.split('='); return !!splitPair[0] && !!splitPair[1]; } function validateUrl(){ if(typeof url !== "string"){ throw "QuerystringTable() :: : expected string, got " + typeof url; } if(url == ""){ throw "QuerystringTable() :: Empty string given for argument "; } } // public function getKeys(){ return Object.keys(table); } function getQuerystring(){ var string; validateUrl(); string = url.split('?')[1]; if(!string){ string = url; } return string; } function getValue(key){ var match = table[key] || null; if(!match){ return "undefined"; } return match; } buildTable(); this.getKeys = getKeys; this.getQuerystring = getQuerystring; this.getValue = getValue; } 

Demo JSFiddle

 function main(){ var imaginaryUrl = "http://example.com/webapp/?search=how%20to%20use%20Google&the_answer=42", qs = new QuerystringTable(imaginaryUrl); urlbox.innerHTML = "url: " + imaginaryUrl; logButton( "qs.getKeys()", qs.getKeys() .map(arrowify) .join("\n") ); logButton( 'qs.getValue("search")', qs.getValue("search") .arrowify() ); logButton( 'qs.getValue("the_answer")', qs.getValue("the_answer") .arrowify() ); logButton( "qs.getQuerystring()", qs.getQuerystring() .arrowify() ); } function arrowify(str){ return " -> " + str; } String.prototype.arrowify = function(){ return arrowify(this); } function log(msg){ txt.value += msg + '\n'; txt.scrollTop = txt.scrollHeight; } function logButton(name, output){ var el = document.createElement("button"); el.innerHTML = name; el.onclick = function(){ log(name); log(output); log("- - - -"); } buttonContainer.appendChild(el); } function QuerystringTable(_url){ // private var url = _url, table = {}; function buildTable(){ getQuerystring().split('&').filter(validatePair).map(parsePair); } function parsePair(pair){ var splitPair = pair.split('='), key = decodeURIComponent(splitPair[0]), value = decodeURIComponent(splitPair[1]); table[key] = value; } function validatePair(pair){ var splitPair = pair.split('='); return !!splitPair[0] && !!splitPair[1]; } function validateUrl(){ if(typeof url !== "string"){ throw "QuerystringTable() :: : expected string, got " + typeof url; } if(url == ""){ throw "QuerystringTable() :: Empty string given for argument "; } } // public function getKeys(){ return Object.keys(table); } function getQuerystring(){ var string; validateUrl(); string = url.split('?')[1]; if(!string){ string = url; } return string; } function getValue(key){ var match = table[key] || null; if(!match){ return "undefined"; } return match; } buildTable(); this.getKeys = getKeys; this.getQuerystring = getQuerystring; this.getValue = getValue; } main(); 
 #urlbox{ width: 100%; padding: 5px; margin: 10px auto; font: 12px monospace; background: #fff; color: #000; } #txt{ width: 100%; height: 200px; padding: 5px; margin: 10px auto; resize: none; border: none; background: #fff; color: #000; displaY:block; } button{ padding: 5px; margin: 10px; width: 200px; background: #eee; color: #000; border:1px solid #ccc; display: block; } button:hover{ background: #fff; cursor: pointer; }