Über einem JS File Direkt als Variable Mittels Cookies Mittels GET Mittels GET Formular Mittels POST Formular Mittels POST


Wie übergibt man PHP Daten an JS und umgekehrt?

Da mit PHP Cookies sehr einfach ausgelesen werden können, ist das Beschreiben ein Ding der Unmöglichkeit. Man darf sie mit PHP nur ganz als erstes am Seitenstart setzen!
Dazu kommt, dass ausser Cookies, die mit dem HTTP-Request vom Browser mitgegeben werden, keine weiteren Daten aus dem Web-Speicher des Browsers für PHP sichtbar sind.
Somit gibt es eigentlich bloss die Möglichkeit der Übergabe die Daten in einem File auf dem Server zu speichern, oder ganz einfach, wenn sich das JavaScript in einer PHP-Seite befindet, als mit PHP geschriebenen Variablen.


Über einem JS File

Eigentlich nur Ratsam wenn die Seite von einem einzigen User genutzt wird. Ausserdem ist diese Methode aus Datenschutzgründe sehr bedenklich.
Um das erste "Problem" zu umgehen ist es ratsam einen persönlichen Dateiname zu benutzen.
JS "liest" nur eigene Daten ein (Beispiel PHP-Daten.js), sonst kenne ich keinen anderen Weg. Wenn man aber eine .HTML Seite hat, ist das die einzige mir bekannte Lösung.
<?php file_put_contents("PHP-Daten.js", "jahr = " . date('Y'));  ?>
Schreibt eine JS-Variable mit dem aktuellen Jahr in die Datei "PHP-Daten.js" ins Server-Verzeichnis

<script src=PHP-Daten.js></script>
Holt das JavaScript "PHP-Daten.js" aus dem Server.

<script>document.write(jahr);</script>
Als "Beweis" wird der ausgelesene Variablenwert hier ausgegeben:


Direkt als Variablen auf die Seite

Wenn man eine .PHP Seite benutzt, erspart man sich den Umweg über das .JS File
<script>
        var jahresZahl =  <?php echo date("Y"); ?> ;
        document.write(jahresZahl);
</script>
mit dem gleichen Ergebnis wie oben:

Für mich die einfachste Methode und hinterlässt keine Spuren von PHP.
Schau doch in den "Seitenquelltext" da sind alle PHP-Angaben "verschwunden", weil die Seite auf dem Server "zusammengesetzt" wurde.


Wie übergibt JS (bezw. HTML) Daten an PHP?

Da kenne ich mehrere Methoden, die alle ausser der ersten ein HTTP-Request benutzen.
Über die gemeinsame Schnittstelle den Cookies, direkt durch ergänzen der URL, indirekt über ein Formular, oder durch das Absetzen und Empfangen eines HTTP-Requests.
Das letzte ist sicher das Beste, ich beherrsche es aber fast nicht 😒.

Mittels Cookies

Wie schon gesagt, wenn Cookies einzutragen über JS einfach ist, ist es genau so einfach sie mit PHP auszulesen. (dagegen Cookies mit PHP zu schreiben und Cookies mit JS auszulesen nur über Umwege möglich)
<script> 
	guetzli_setzen("meldungAnPHP:","Hallo, JavaScript grüsst PHP!");
	
	function guetzli_setzen(name,wert)
		  {// Schreibt ein Cookie mit unbeschränkten Gültigkeit
		      console.log("guetzli_setzen(",name,wert); 
			  document.cookie = name + "=" + wert + ";SameSite=Lax";		     	  
		  }
</script>
	
<?php
   echo $_COOKIE["meldungAnPHP"];
?>
Somit wird folgendes ausgegeben


Mittels GET

Wie mit Cookies ist auch die GET-Methode einfach zu programmieren, Es wird einfach die URL gefolgt von "?" und die Werte aufgerufen.
Nachteil: Die Informationen werden unverschlüsselt ins Netz gesendet. (PS: das "#GET" am Ende der URL ist nur die Sprungmarke zu diesem Kapitel) 
<input type=button onclick="location.href='VerbindungPHP-JS.php?wert1=Hallo&wert2=Welt#GET';" value="GET-Methode" />

<?php echo $_GET['wert1'] . " " . $_GET['wert2']; ?>


Mit 'location.href'=URL?wert=liste&...usw. wird die Seite mit Parameter erneut aufgerufen und mit PHP ausgelesen und die Werte ausgegeben:Ausgabe -> <-. Wenn nichts erkannt wird, werden im PHP die $_GET ignoriert, ohne einen Fehler auszugeben.
Schaue dir, nach dem Auslösen von "GET-Methode", die URL an, auch wenn nun die Seite refresht wird bleibt alles unverändert, ausser du änderst etwas an der URL.


Mittels GET (HTML Formular)

Man Kann auch einfach mit HTML mit PHP Daten austauschen. Man braucht bloss im <form> als action-method das GET auswählen.
Nach dem Absenden erkennt man hinter der URL im Adressbalken des Browsers die typischen GET-Informationen hinter dem Fragezeichen. 
<form action="VerbindungPHP-JS.php" method="get">
Vorname: <input type="text" name="vorname" value="Seo" />
Namename: <input type="text" name="nachname" value="Kant" /><br>
<input type="Submit" value="Absenden GET" />
</form>

<?php var_dump(  $GLOBALS['_GET']); ?>
Vorname: Namename:

PHP var_dump von $_GET: array(0) { }


Mittels POST (HTML Formular)

Der selbe "Trick" mit dem Formular klappt auch mit der POST-Methode, das heisst man ersetzt in der action-method das GET mit POST.
Dieses Beispiel zeige ich aber auch mit JavaScript, das "drein redet" und verborgene Formularelemente. 
<form action="VerbindungPHP-JS.php#POSTForm" method="post">
<input type="text" id="postwert1"  name="POSTwert1" value="" style="display: none; "/>
<input type="text" id="postwert2"  name="POSTwert2" value="" style="display: none; " />
<input type="Submit" value="Absenden POST" />
</form>

<script>
	document.getElementById("postwert1").value = "JS mischte";
	document.getElementById("postwert2").value = " sich ein";
</script>

<?php echo $_POST['POSTwert1'] . $_POST['POSTwert2'] ; ?>

PHP var_dump von $_POST:


Mittels POST

Die POST-Methode hat eine etwas sichere Datensicherheit als die GET-Methode ist aber (was sonst) aufwändiger zu programmieren... vorallem für einen Informatikdummy wie ich.
Was die Sache nicht einfach macht, ist die synchrone (parallele) Verarbeitung einiger JS-Funktionen, wärend JS eigentlich asynchron (sequentiel) arbeitet.
Beide Beispiele nutzen den XMLHttpRequest der leider synchron arbeitet. Das erste Beispiel ist meins und nutzt die PHP Datei var_dump.php mit dem einzigen Inhalt <?php var_dump($_POST) ; ?>. Sie gibt den PHP Array "$_POST" mit den übermittelten JS Variablen "daten" zurück
Bitte die Konsole einschalten. 

<script>	 
	var jsDaten;	
	function meinVersuch()
	{
		const daten = "Zahl_1=Eins&Zahl_2=Zwei&Zahl_3=Drei";		
		const x = new XMLHttpRequest();
		x.open("POST", "var_dump.php");
		
		x.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
		x.responseType = "text";
		x.send(daten);
		x.onload = function()
					{// Auswahl wie die Werte weiter verarbeitet werden
					 document.getElementById("POSTausgabe").innerHTML =  " Gefundener Text: " + x.response;
					 jsDaten = x.response;
					 weiter(x.response);
					};
	}
	
	function weiter(direkt)
	{   // Hier könnten die Werte aus dem PHP verarbeitet werden
		console.log("Aus der HTML Seite",document.getElementById("POSTausgabe").innerHTML);
		console.log("Aus der Variabeln 'jsDaten'",jsDaten);
		console.log("Aus dem Argument",direkt);
	}

</script>
Das andere Beispiel habe ich im Web geklaut und löst das Problem der synchronen Funktion für den XMLHttpRequest mit callback. Und da endet meine Weisheit. Dieses Beispiel erhält die eigene IP-Adresse zurück und nutzt die PHP-Seite post.php mit dem einzigen Inhalt <?php echo $_SERVER['REMOTE_ADDR'] ; ?>.

<script>
function ladeIP(callback) {  
    let request = new XMLHttpRequest();
    request.onload = () => {     
        if (request.status === 200) {      
             IP = request.responseText;
            if (typeof callback == 'function') {
                callback(IP);
            }
        } else {
            console.log("IP konnte nicht geladen werden: " + request.responseText);
            window.alert("IP konnte nicht geladen werden");
        }     
    } 
    request.open("POST", "post.php" );
    request.send();
}


function fremdVersuch()
{
  let fnc = function(IP) {
    console.log(IP);
    document.getElementById("POSTPOSTausgabe2").innerHTML = IP;
    
  };
  ladeIP( fnc);
}
</script>

Leert die Ausgaben der vorhergehenden Beispielen


Aus diesen Versuche resultierenden Fragen: