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.

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.

SIE HABEN NOCH FRAGEN ?

FORUM

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.