In diesem Blogbeitrag möchte ich zeigen, wie man Variablen von JavaScript an PHP übergeben kann, diese dort verarbeitet und etwas zurück gibt. Ich werde zeigen, wie die Übergabe auf herkömmliche Weise mit reinem JavaScript und mit der JavaScript Bibliothek jQuery funktioniert.
[adrotate banner=“11″]
Was ist jQuery?
jQuery ist eine freie JavaScript Bibliothek, die JavaScript um viele nützliche Funktionen erweitert. So stellt sie z.B. verschiedene AJAX Methoden bereit, mit denen man Daten asynchron mit einem Server austauschen und anschließend bestimmte Bereiche der Webseite neuladen kann – ohne die komplette Seite zu aktualiseren. Die Funktion zum asynchronen Datenaustausch werden wir in diesem Beispiel verwenden.
Einbinden von jQuery
Um jQuery verwenden zu können, muss die Bibliothek in den Kopf der Quelldatei eingebunden werden, in der sie verwendet werden soll. In meinem Fall handelt es sich um die index.php.
Danach stehen uns alle Funktionen zur Verfügung.
"https://code.jquery.com/jquery-1.10.2.js"
JavaScript Variablen ohne jQuery an PHP übergeben
In diesem Beispiel möchte ich zeigen, wie man Variablen von JavaScript an PHP ohne jQuery übergeben kann. Die Variable wird hier übergeben, um mit PHP zu überprüfen, ob es sich bei einer Eingabe tatsächlich um eine Email Adresse handelt oder nicht.
In meiner Oberfläche wird der Benutzer dazu aufgefordert, seine Email Adresse in das Textfeld „EingabeText“ einzugeben und den „OK“ Button zu klicken.
function IsEmail() { mail = EingabeText.value; var request = new XMLHttpRequest(); request.open('post', 'Mailer.php', true); request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); request.send('daten='+mail); }
Hier verwenden wir nun zum ersten Mal die AJAX-Funktionen von JavaScript. Um die Email Adresse überprüfen zu können, wird das Textfeld ausgelesen und in die Variable „mail“ gespeichert. Anschließend erzeugen wir einen neuen XMLHttpRequest, mit dem wir Daten über das HTTP-Protokol übertragen können.
In der open()-Funktion wird die Datenübertragungsart sowie die PHP-Datei, an die übertragen werden soll, festgelegt. In diesem Fall setze ich die Übertragungsart auf „POST“, wähle als Ziel die „Mailer.php“ und übertrage die Daten mit „true“ asynchron. Bei der asynchronen Übertragung findet das Senden und Empfangen zeitlich versetzt statt und blockiert damit nicht den gesamten Prozess. Optimal also, um eine Eingabe mit PHP zu überprüfen.
Jetzt muss man noch den Header des Aufrufes mit setRequestHeader() setzen. Ich setze hier den Standard Header ( http://www.w3.org/TR/html401/interact/forms.html#h-17.13.4.1).
Als letztes folgt dann mit send() die Übertragung der Daten.
if(isset($_POST['daten'])){ $email = $_POST['daten']; $return = 0; if (filter_var($email, FILTER_VALIDATE_EMAIL)) { $return = 1; } echo $return; }
In der PHP-Datei wird mit isset() überprüft, ob die übergebenen Daten leer sind oder nicht. Anschließend wird der Inhalt in „$email“ gespeichert. Um zu überprüfen, ob es sich bei der Eingabe um eine Email Adresse handelt, stellt PHP eine Filterfunktion zur Verfügung. Alternativ kann man auch selbst auf reguläre Ausdrücke überprüfen.
Falls es sich um eine Email Adresse handelt, wird die Variable „$return“ auf 1 gesetzt. Die Rückgabe an JavaScript erfolgt mit „echo $return“.
Zurück in der index.php lässt sich jetzt auf den Rückgabewert prüfen
request.onreadystatechange = function() { if (request.readyState==4 && request.status==200){ if(request.responseText == 0){ alert("Keine Email Adresse"); } else{ alert("Es ist eine Email Adresse"); } } }
Sobald die Übertragung fertig ist, wird die „onreadystatechange“ Funktion aufgerufen. In dieser überprüfe ich mit „readyState==4“, ob die Übertragung vollständig ist und ob bereits eine Antwort vorliegt. Mit „status==200“ wird überprüft, ob die „Mailer.php“ auch tatsächlich gefunden wurde.
Im nächsten Schritt wird der „responseText“ auf „0“ oder „1“ geprüft. Abhängig von dem Rückgabewert der PHP-Datei wird hier eine andere Meldung ausgegeben.
JavaScript Variablen mit jQuery an PHP übergeben
Im obigen Beispiel habe ich eine JavaScript Variable ohne jQuery an PHP übergeben. Hier möchte ich nun zeigen, wie die Übertragung mit jQuery funktioniert.
$.post( "Mailer.php", { json: mail }, function(return){ if(return == 0){ alert("Keine Email Adresse"); } else{ alert("Es ist eine Email Adresse"); } }
Wie zu sehen ist, ist die Übertragung der JavaScript Variablen zu PHP mit jQuery wesentlich einfacher und übersichtlicher als mit nativem JavaScript. Im selben jQuery Aufruf kann der Rückgabewert überprüft werden. Auch hier wird eine entsprechende Meldung ausgegeben, ob es sich um eine Email Adresse handelt oder nicht. Der PHP Code für die Übertragung mit jQuery ist identisch zum Beispiel ohne jQuery.
Es ist also ganz einfach, Variablen von JavaScript mit und ohne jQuery an PHP zu übergeben.
[adrotate banner=“13″]
Artikel bewerten
Finden Sie den Artikel „JavaScript Variable an PHP übergeben – JQuery und AJAX“ hilfreich? Dann hinterlassen Sie uns einen Kommentar, oder bewerten Sie ihn.
Vielen dank für den Beitrag, habe noch einen Fehler gefunden:
application/x-www-formurlencoded
wäre korrekt:
application/x-www-form-urlencoded
(Da fehlt ein Bindestrich zwischen form und urlencoded)
Gruss
Christian
Danke! Ist geändert
Hi!
Vielen Dank dafür.
Ich bekomms leider nicht zum Laufen, da ich echt kaum Ahnung von Javascript habe. Genau deswegen suche ich eine Möglichkeit, Variablen nach PH zu übergeben, um in PHP weiter zu arbeiten.
Kannst Du vielleicht mal ein komplett fertiges Beispiel (am liebsten mit jQuery) zur Verfügung stellen, in dem 2 oder 2 Variablen z.B. bei Klick auf einen Link übertragen werden?
In dem obigen Fenster verstehe ich nicht, wo ich den Code hinschreiben mus, und wie ich ihn „auslöse“.
Das wär halt einfach super lieb! :-)
Hi Jana,
ich habe jetzt grade leider kein vollständiges Beispiel, aber um deine Frage zu beantworten:
Du hast z.B. im Header Javascript Code:
function to_php(){
var mail = „test“
$.post( „Mailer.php“, {json: mail}
}
Diese Funktion kannst du jetzt bei Klick auf einen Button auslösen, z.B. so:
Click me
Bei Klick auf den Button wird die Javascript Funktion im Header aufgerufen. In der Funktion wird der Wert der Variable mail als “test” gesetzt und diese dann über jQuery per Post-Request an die „Mailer.php“ übergeben. Mit dem jQuery Code aus dem Artikel kannst du dann auf Antworten (Response) des PHP-Skriptes reagieren. Nicht vergessen, dass du jQuery noch einbinden musst.
Ich hoffe das hilft. Falls nein, dann gerne Codebeispiele oder konkrete Fehler posten.
Viele Grüße,
Philipp
Hallo lieber Philipp,
Mein Problem liegt darin, dass ich in dem JavaScript eine bestimmte variable herausfinde, sie auch mit z.B. alert ausgeben kann, doch ich weiß nicht wie ich sie zu einer Variable in php bekomme…
die Variable heißt in JS „var id“ und ich möchte den inhalt dieser Variable schlichtweg in php bekommen.
würde mich sehr über eine simple Lösung freuen wie der code aussehen könnte.
Gruß Simon
Hallo! Leider muss ich mich Robby anschließen: Kaum eine php-Anleitung ist so verständlich geschrieben wie diese hier – doch leider funktioniert es bei mir nicht.
html-Startseite:
Testseite
Javascript: varpost.js
function findeId() {
var alpha = ‚Übermittlung hat funktioniert!‘;
var request = new XMLHttpRequest();
request.open(‚post‘, ‚counter.php‘, true);
request.setRequestHeader(‚Content-Type‘, ‚application/x-www-formurlencoded‘);
request.send(‚daten=’+alpha);
}
PHP:
Irgendwie wird das php-Script nur halb ausgeführt, wenn ich es mittels send() starte: Die txt wird erstellt, ist aber leer. Starte ich das php-Script direkt, wird ‚Test‘ geschrieben.
Ich kann leider nicht genau sagen, warum dein PHP Skript nur halb ausgeführt wird, weil der Code nicht vorhanden ist. Allerdings glaube ich, dass es an dem PHP Code liegt.
Hier ein weiteres Beispiel, welches bei mir funktioniert:
HTML/JavaScript Code:
data = „Beispieltext“;
var request = new XMLHttpRequest();
request.open(‚post‘, ‚Mailer.php‘, true);
request.setRequestHeader(‚Content-Type‘, ‚application/x-www-form-urlencoded‘);
request.send(‚json=’+data);
request.onreadystatechange = function() {
if (request.readyState==4 && request.status==200){
alert(request.responseText);
}
}
PHP Skript:
Hierbei wird ein Text an das PHP Skript übergeben, welchen den Text in eine Datei schreibt. (Test.txt)
Ich habe die Dateien auf meine Dropbox hochgeladen. Einfach die Test.html mit XAMPP lokal ausführen. Beide Dateien müssen im selben Ordner liegen.
https://www.dropbox.com/sh/u8fmu5z01gs66tz/AABhkzCsOuJ5rHmnKY9z-kw_a?dl=0
Ich hoffe, das löst die Probleme. Bitte um Rückmeldung, was der aktuelle Stand ist.
Ich habe gerade gemerkt, dass der PHP Code vom Blog gefiltert wird. Die Dateien befinden sich aber in der Dropbox, sollte also kein Problem darstellen.
Hallo Philipp,
ich habe deine Test.html mit Mail.php ausprobiert, wie du sie in die Dropbox bereitgestellt hast. Funktioniert auch.
Aber wie befülle ich ‚data‘, mit diversen Werten aus einem Formular, wie in deinem Blogbeispiel, anstatt mit einem festgelegten Wert?
Müsste das Form für dein Beispiel ungefähr so aussehen? ->
Ich bin nun auch erst noch Anfänger..
Gruß
Der Blog filtert Code, deshalb am besten Seiten wie jsfiddle.net oder pastebin.com verwenden, um Beispiele anzuzeigen.
Bei data handelt es sich um ein JSON-Array. JSON ist ein JavaScript Format => vergleichbar mit XML nur kompakter. Unter dem Punkt „Mehrere Variablen an PHP übergeben“ wird gezeigt, wie man data mit Werten füllt.
http://pastebin.com/WWN4VXb9
Wenn man jetzt Werte aus einem Formular verwenden möchte, funktioniert das prinzipiell genauso. Man muss sich allerdings erst einmal die Werte aus dem Eingabeformular beschaffen. Bei einem Textfeld wäre das so: „eingabeText = dasTextfeld.value;“ zu realisieren.
Wenn man nur einen Wert an PHP übergeben möchte, wird JSON (also data) gar nicht benötigt. Das wäre dann unter dem Punkt „Einzelne Variablen übergeben“ nachzulesen.
Bei mehreren Eingabeformularen würde es dann so aussehen:
http://pastebin.com/t3yyuggk
Ich hoffe, dass ich weiterhelfen konnte.
Hallo Philipp,
danke für deine Mühe!
So ganz komme ich damit immer noch nicht zurecht. Leider.
Hier noch mal der Code, der zuletzt gefiltert wurde: http://pastebin.com/w63usrTy
Bezog sich auf deine Oberfläche in deinem eMail-Blogbeispiel, ob die so aussehen würde/könnte.
Eine weitere Frage zu deinem Blogbeispiel: Unter „Mehrere Variablen an PHP übergeben“, diese Zeile: request.send(‚mail=’+data); .. da frage ich mich, was das mail= bedeutet? Oder müsste da ‚daten=‘ stehen, damit es zu dem PHP Code darunter passt?
Ich brauche auf jeden Fall die Werte aus einem Formular zur Weiterverarbeitung in PHP. Die Werte wurden mit Hilfe von autoStorage durch den Benutzer selbst in input-Felder (type=tel) gespeichert und stehen dort auch immer drin. Diese Werte (zwei verschiedene Nummern) möchte ich dort auslesen, ohne irgend einen Button zu drücken, und in PHP weiterverwenden.
Aber ich bekomme nicht einmal ein input ausgelesen mit jQuery, um sie dann so wie du es getan hast oder in deinem Beispiel mit der Test.txt, weiterzuverwenden.
Hatte schon zum testen so was probiert:
data = document.getElementById(‚EingabeText‘).value;
Aber es klappt einfach nicht. Hmm.
Nachtrag:
Ich teste weiterhin mit deinem in der Dropbox hinterlegten Beispiel mit Test.html, Mailer.php und der durch die PHP-Datei erzeugten txt-Datei (Test.txt).
So sieht mein html inkl. jQuery aus: http://pastebin.com/j7avBAJw
Funktioniert nun auch mit einem übergebenen Wert.
Mit dem zweiten Wert will es noch nicht funktionieren. Da scheint er nicht mal die php-Datei ausführen zu wollen.
Hatte das: data = EingabeText.value;
mit dem ersetzen wollen:
feld[‚eins‘] = EingabeText.value;
feld[‚zwei‘] = EingabeText2.value;
data = JSON.stringify(feld);
Wie müsste da die Mailer.php aussehen, damit beide Werte in die txt-Datei geschrieben werden und ein alert erscheint?
Ich hatte es stumpf so probiert:
http://pastebin.com/mvqmNKkS (auch mal so: $daten = json_decode($_POST[‚json‘]);)
Gruß
Also das Problem war, dass hier nur ein einzelner Wert übergeben wird und kein Array. In der PHP Datei hast du auf die Übergabe als Array betrachtet obwohl es sich um einen einzelnen Wert handelt. Folglich wird auch nichts in das Textfile geschrieben.
Ich habe mal die HTML und PHP Datei entsprechend angepasst.
Hier HTML: http://pastebin.com/QeNe1XM1
HIer PHP: http://pastebin.com/DNcdRbZM
Ich hoffe, dass das deine Fragen beantwortet. Ich werde die Tage den Artikel auch mal etwas überarbeiten, da man noch einiges vereinfachen kann.
Hey Robby,
ich bin gerade im Urlaub und kann dir die Daten deshalb erst in ca einer Woche zur Verfügung stellen.
Was genau funktioniert denn nicht? Bitte poste deinen Quellcode, dann kann ich dir besser helfen.
Alternativ habe ich einen Link zu einem Feedreader den ich mit einem Kommilitonen erstellt habe. Dort wird das im Artikel genannte sehr häufig verwendet. Schau dir einfach mal den Quellcode an. Z.b. die Feedreader.php
https://github.com/it14083/wengrss
Hallo! Vielen Dank für die übersichtliche undf verständliche Anleitung! Leider funktioniert dies bei mir nicht :( Kannst du die Dateinen zur Verfügung stellen, damit ich dies damit mal testen kann? Danke!