Daten von PHP an JavaScript übergeben: Komplettguide mit Beispielen

Daten von PHP an JavaScript übergeben: Häufige Fragen und Antworten

Hast du jemals ein PHP-Skript geschrieben, ein Array mit Daten aus der Datenbank erstellt und dann entsetzt festgestellt, dass der JavaScript-Code auf derselben Seite nichts davon weiß? Eine vertraute Situation. PHP läuft auf dem Server, JavaScript im Browser des Benutzers. Das sind zwei verschiedene Welten, getrennt durch Zeit und Raum. Aber wie bringt man sie dazu, miteinander zu kommunizieren? Wie übergibt man Variablen und Daten von PHP an JavaScript?

Dieses Thema ist eine der häufigsten Fragen auf Stack Overflow (zehntausende Aufrufe!). Und das zu Recht: Die Interaktion zwischen serverseitigem und clientseitigem Code ist eine grundlegende Fähigkeit für jeden Webentwickler. In diesem Artikel zeigen wir dir 5 bewährte Methoden zur Übergabe von Daten von PHP an JavaScript – von einfach bis fortgeschritten. Los geht's!

Warum können PHP und JavaScript nicht einfach miteinander reden?

Bevor wir in den Code eintauchen, lass uns die Architektur verstehen. Wenn ein Benutzer eine Seite anfordert, passiert Folgendes:

\n
1. Der Server führt das PHP-Skript aus.
\n
2. PHP generiert HTML (und kann darin JavaScript einfügen).
\n
3. Der Server sendet den fertigen HTML-Code an den Browser.
\n
4. Der Browser rendert die Seite und führt JavaScript aus.
\n

Der entscheidende Punkt: PHP wird ausgeführt, bevor JavaScript die Seite zu sehen bekommt. Daher ist die Übergabe von Variablen von PHP an JavaScript nur während der HTML-Generierung möglich. JavaScript kann nach dem Laden der Seite keine Daten von PHP "anfordern" (dafür gibt es AJAX, aber das ist eine andere Geschichte).

Methode 1: PHP direkt in JavaScript einbetten (am einfachsten)

Der offensichtlichste Weg ist, eine PHP-Variable direkt in den serverseitig generierten JavaScript-Code auszugeben. Beispiel:

<?php\n$userName = "Alex";\n$userAge = 28;\n?>\n\n<script>\n    var name = "<?php echo $userName; ?>";\n    var age = <?php echo $userAge; ?>;\n    console.log("Hallo, " + name + "! Du bist " + age + " Jahre alt.");\n</script>\n

Funktioniert es? Ja. Sieht es gut aus? Nicht wirklich. Die Nachteile sind offensichtlich:

\n
• Der Code wird unübersichtlich und schwer lesbar.
\n
• Wenn die Variable Anführungszeichen oder HTML-Tags enthält, erhältst du einen Syntaxfehler in JavaScript.
\n
• Sicherheit? Vergiss es: XSS-Angriffe werden dir danken.
\n

Diese Methode eignet sich nur für einfache Zeichenketten ohne Sonderzeichen (z. B. eine Datensatz-ID oder Seitenzahl). Für alles andere verwende die folgenden Methoden.

Methode 2: JSON – der König der Datenübergabe

JSON (JavaScript Object Notation) ist das Standardformat für den Datenaustausch zwischen Server und Client. PHP kann jedes Array oder Objekt mit einer einzigen Funktion json_encode() in JSON umwandeln. JavaScript wiederum kann JSON problemlos parsen.

Beispiel: Ein Array von Benutzern von PHP an JavaScript übergeben.

<?php\n$users = [\n    ['name' => 'Max', 'age' => 25],\n    ['name' => 'Anna', 'age' => 30],\n    ['name' => 'Peter', 'age' => 35]\n];\n$jsonUsers = json_encode($users, JSON_UNESCAPED_UNICODE);\n?>\n\n<script>\n    var users = <?php echo $jsonUsers; ?>;\n    console.log(users[0].name); // "Max"\n    console.log(users.length); // 3\n</script>\n

Warum ist das großartig?

\n
• Sicher: json_encode() maskiert automatisch Sonderzeichen.
\n
• Vielseitig: Übergib Zeichenketten, Zahlen, Arrays, Objekte, boolesche Werte.
\n
• Sauber: Der Code ist leicht zu lesen und zu warten.
\n

Der einzige Nachteil: Die Daten werden direkt in den HTML-Code der Seite eingebettet. Bei vielen Daten wird die Seite schwerer. Für die meisten Aufgaben ist dies jedoch die optimale Lösung.

Methode 3: data-Attribute in HTML (für die Übergabe über das DOM)

Manchmal müssen Daten übergeben werden, die mit einem bestimmten Element auf der Seite verknüpft sind. Zum Beispiel