POST Parameter in JavaScript benutzen

Nachdem der letzte Beitrag wohl etwas irreführend war, hier mal ein Bericht mit dem Ziel, POST Parameter in JavaScript zu benutzen.

Nachdem man ja GET-Parameter relativ leicht auslesen kann, will ich hier nur auf die POST-Parameter eingehen.

Zunächst einmal muss man beschreiben, was denn nun bei einem POST-Request passiert und warum man nicht einfach per JavaScript darauf zugreifen kann.

Ganz kurz: Per POST werden Daten vom Browser (Client) an den Webserver (Server) gesendet, wo diese dann ausgewertet werden können. Der Client “wartet” solange auf Antwort, bis der Server diese sendet. In der ganzen Zeit kann man mit “normalem” JavaScript nix anfangen, da der Client-Code ja noch gar nicht im Browser ist. Sendet der Server nun eine Antwort, so erhält der Browser einfach neue Parameter, ähnlich wie beim GET, nur sind die POST-Paramater nicht zugänglich, weil diese in dem Moment nirgendwo mehr gesetzt sind.
Soviel zur Basis.

“Und wie komme ich nun an die Parameter ran?”
Gute Frage und ebenso leicht zu beantworten. Den POST muss Serverseitig ja irgendeine Serverseitige Scriptsprache entgegennehmen (nehmen wir mal rein zufällig … ähm … PHP) und diese kann dann auf die Eingabe reagieren und eine neue Seite bauen.

Damit ich nun Clientseitig wieder die POST-Daten habe, muss ich mir von PHP aus die POST-Daten irgendwohin in die Antwort an den Browser schreiben, wo JavaScript auch was damit anfangen kann.

Beispiel, ein Kontaktformular (ganz simpel):

<form action="formular.php" method="POST">
<input name="meinname" type="text" />
<input name="senden" type="submit" value="absenden!" />
</form>

Wir möchten nun, nachdem das Formular abgesendet wurde, auf der Antwortseite eine alert-Box aufpoppen lassen, die “Danke, xyz” sagt (ist wirklich ein sehr einfaches Beispiel, oder?)

Okay, der Code für formular.php

<?php if (isset($_POST['meinname'])) { ?>
<script>
var derNameLautet = <?=$_POST['meinname']?>;
alert('Danke, ' + derNameLauetet);
</script>
<?php } ?>

So, nun wird, wenn ein POST vorliegt, der POST-Wert in eine JavaScript Variable geschrieben. Diese kann ich dann für vieles Benutzen, ich hoffe, das Prinzip ist klar.

Aber ich habe einen AJAX-POST, wie mache ich das denn da?
Noch einfacher, der AJAX-POST verlässt ja die Seite nicht, d.h. die Werte, die per POST gesendet wurden, liegen ja noch immer vor und können recht einfach weiterbenutzt werden.

So, diesmal sollte das ganze Prinzip klarer sein, warum ein Auslesen der POST-Variablen in JavaScript mittels

<script>
var meinePOSTVariable = POST[‘postVariable’];
</script>

schlicht nicht möglich ist.

4 Gedanken zu „POST Parameter in JavaScript benutzen

  1. Anonymous

    Da JavaScript im Client ausgeführt wird und der HTTP-Request an den Server zu der Zeit vorbei und beantwortet worden ist, ist das natürlich nicht möglich. Die Daten also wieder ans Dokument weiterzureichen, ist da schon richtig aber warum zur Hölle als class-Attribut? Was spricht gegen ein input-Element mit type=hidden?

    Wenn es direkt im JavaScript verfügbar sein soll, wäre auch ein inline-script denkbar mit:
    var foo = ‚bar‘; // bar ist von php erzeugt

    Ich würde ein richtiges Beispiel posten aber dein Blog versucht, das HTML zu interpretieren und streikt dann 😉

    Antworten
  2. Sascha Presnac

    @Anonym: Du hast völlig recht, es gibt verschiedene Wege, das zu lösen. Im konkret vorliegenden Fall benötigte ich die POST-Variable als class-Attribut, damit es u.a. von jQuery vernünftig ausgelesen werden konnte. Man kann es auch direkt in die JS-Variable speichern; ich werde morgen mal ein Beispiel dazu posten.

    Antworten
  3. Sascha Presnac

    Okay, ich habe den Artikel mal geändert und hoffe, dass diese Version allgemein verständlicher ist. Der vorherige war wirklich sehr problembezogen und natürlich habt ihr alle recht, das man sowas normalerweise nicht macht.
    Wäre für Kommentare zum neuen Beitrag dankbar.

    Antworten

Schreibe einen Kommentar zu Saphir2k Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert