Wie kann man Variablen von PHP an JavaScript übergeben

Wenn Sie eine dynamisch generierte PHP-Variable an JavaScript übergeben müssen, ist dieses Snippet genau für Sie.

Wie übergibt man Variablen mit json_encode()


Das ist der einfachste Weg, eine Variable von PHP an JavaScript zu übergeben. Sie definieren einfach die PHP-Variable, dann echo es in eine einfache JavaScript-Variablendeklarationsanweisung.

Bemerken Sie bitte, dass die PHP-Variable vor der JavaScript-Variable definiert werden muss.

Nehmen wir an, dass wir die folgende Variable in PHP haben: 

<?php
$name = 'John' ;
?>

Und wir möchten es an eine JavaScript-Variable mit dem Namen name übergeben. So geht's los:

<script>
'var name = <?php echo json_encode($name); ?>;
</script>'
Vorschlag: Diese Methode ist einfach zu implementieren und zu verstehen. Variablen werden direkt in JavaScript ausgegeben, so dass das DOM nicht betroffen ist.
Hinweis: PHP hat keine trivialen JavaScript-Escape-Funktionen, und sie sind nicht trivial zu implementieren.

Wie verwendet man AJAX, um Variablen von PHP an JavaScript zu übergeben?


Diese Methode übergibt die Variable von JavaScript an PHP, ohne die Seite neu zu laden. Diese Methode gilt als die beste, da der Server- und clientseitige Skripte völlig getrennt sind.

Um AJAX zu verwenden, benötigen Sie zwei Seiten, die Erste ist, wo PHP die Ausgabe erzeugt, und die Zweite ist, wo JavaScript die Ausgabe bekommt:

  • get-data.php
/* Do some operation here, like talk to the database, the file-session 
* The world beyond, limbo, the city of shimmers, and Canada. 
* 
* AJAX generally uses strings, but you can output JSON, HTML and XML as well.
* It all depends on the Content-type header that you send with your AJAX 
* request. */ 
echo json_encode(42); //In the end, you need to echo the result. 
                      //All data should be json_encode()d. 

                     //You can json_encode() any value in PHP, arrays,                             
                     strings, //even objects.
  • index.php (oder wie auch immer die aktuelle Seite benannt ist)
<!-- snip →
 <script> 
     function reqListener () { 
        console.log(this.responseText); 
     } 
     var oReq = new XMLHttpRequest(); //New request object 
     oReq.onload = function() { 
          //This is where you handle what to do with the response. 
          //The actual data is found on this.responseText
         alert(this.responseText); //Will alert: 42 
     }; 
     oReq.open("get", "get-data.php", true); 
// ^ Don't block the rest of the execution. 
// Don't wait until the request finishes to // continue. 
oReq.send(); 
</script> 
<!-- snip -->

Das Ergebnis für die angegebene Kombination der beiden Dateien ist 42, wenn das Laden der Datei abgeschlossen ist.

Vorschlag: Mit Ajax erhalten Sie mehr lesbaren Code auf beiden Sprachen, ohne JS und PHP zu mischen. Vorschlag: Die Daten werden nicht direkt auf dem Markup gefunden, was bedeutet, dass Ihr Markup von zusätzlichen Daten sauber gehalten wird und nur JavaScript sie sieht.
Hinweis: Die über einen separaten HTTP-Request erzeugten Daten enthalten keine Informationen aus dem HTTP-Request, der das HTML-Dokument erzeugt hat. Wenn Sie die Einbettung der Daten in die Seite ausgeschlossen haben, beschränkt sie sich auf Cookies/Sitzungen.

Echoen die Daten und verwenden Sie JavaScript, um die Informationen aus dem DOM zu erhalten.


Diese Methode ist nicht besser als AJAX, hat aber ihre Vorteile. Es ist immer noch relativ getrennt zwischen PHP und JavaScript in einer Weise, dass es kein PHP-Recht im JavaScript gibt.

Dadurch wird ein Element erzeugt, das dem Benutzer nicht angezeigt wird, aber für JavaScript erkennbar ist.

  • index.php
<!-- snip -->
<div id="dom-target" style="display: none;">
    <?php 
        $output = "42"; //Again, do some operation, get the output.
        echo htmlspecialchars($output); /* You have to escape because the result
                                           will not be valid HTML otherwise. */
    ?>
</div>
<script>
    var div = document.getElementById("dom-target");
    var myData = div.textContent;
</script>
<!-- snip -->
Vorschlag: DOM-Operationen sind oft schnell, und Sie können viele Daten relativ schnell speichern und erhalten.
Hinweise: Die von PHP erzeugten Daten werden direkt an den HTML-Quelltext ausgegeben, was bedeutet, dass Sie möglicherweise einen "schmutzigen" HTML-Quelltext erhalten.
Hinweise: Es ist schwierig, strukturierte Daten zu erhalten und es ist schwierig, PHP und Ihre Datenlogik sauber zu trennen.