Lesen der Post-Request-Parameter mit JavaScript

88

Ich versuche, die Post-Request-Parameter aus meinem HTML-Code zu lesen. Ich kann die get request Parameter mit dem folgenden Code in JavaScript lesen.

$wnd.location.search

Bei Postanfragen funktioniert dies jedoch nicht. Kann mir jemand sagen, wie ich die Parameterwerte nach der Anforderung in meinem HTML-Code mit JavaScript lesen kann?

DonX
quelle

Antworten:

177

POST-Daten sind Daten, die serverseitig verarbeitet werden . Und Javascript ist auf der Client-Seite. Es gibt also keine Möglichkeit, Post-Daten mit JavaScript zu lesen.

rahul
quelle
67
Obwohl die Schlussfolgerung richtig ist (Sie können diese Daten nicht aus Javascript erhalten), ist die Argumentation falsch. Der Client (der Browser) ist derjenige, der die POST-Daten an erster Stelle an den Server sendet. Der Kunde weiß also sehr gut, was diese Daten sind. Der eigentliche Grund ist einfach, dass der Browser diese Daten nicht für Javascript verfügbar macht (aber es könnte perfekt sein).
GetFree
@ GetFree: Was nützt einem Webentwickler dieses sogenannte Wissen über die POST-Variablen? Kein Webentwickler wird ein clientseitiges Skript schreiben, das auf dem Browser basiert und möglicherweise die Post-Daten für JavaScript verfügbar macht, da dies, wie Sie hervorheben, in der Praxis niemals vorkommt . In der realen Welt ist die hier präsentierte Antwort also richtig, genauso wie meine eigene.
Platinum Azure
32
@PlatinumAzure, ich bin nicht sicher, ob Sie den Punkt verstehen. Sie sagen, die POST-Daten sind auf dem Server vorhanden, und da Javascript auf dem Client ausgeführt wird, kann JS auf keinen Fall auf diese Daten zugreifen. Das ist falsch, die POST-Daten sind sowohl im Client als auch auf dem Server vorhanden. Der Grund, warum JS nicht auf diese Daten zugreifen kann, liegt einfach darin, dass der Client (der Browser) sie JS nicht zur Verfügung stellt. So einfach ist das.
GetFree
12
@PlatinumAzure, Ja, das kann aus irgendeinem Grund nicht gemacht werden. Aber wenn Sie erklären wollen, was dieser Grund ist, stellen Sie sicher, dass es der richtige Grund ist. Ihre Erklärung, warum es nicht möglich ist, ist falsch, das ist der Punkt.
GetFree
10
Da Browser Dinge wie Web-Apps erhalten, Apps, die (oft) zu 100 Prozent im Browser ausgeführt werden (kein Server außer Hosting-Dateien), ist es eine natürliche Notwendigkeit, größere Datenmengen empfangen zu können. Die Größe der Abfragezeichenfolge (GET-Methode) ist begrenzt (denken Sie an 4 KB), daher wäre die Möglichkeit, größere Teile von POSTED-Daten aus Javascript zu lesen, meiner Meinung nach eine gute Idee.
Netsi1964
24

Ein kleines Stück PHP, mit dem der Server eine JavaScript-Variable auffüllen kann, ist schnell und einfach:

var my_javascript_variable = <?php echo json_encode($_POST['my_post'] ?? null) ?>;

Greifen Sie dann einfach wie gewohnt auf die JavaScript-Variable zu.

Beachten Sie, dass es keine Garantie gibt, dass bestimmte Daten oder Arten von Daten veröffentlicht werden, es sei denn, Sie überprüfen - alle Eingabefelder sind Vorschläge, keine Garantien.

Roger
quelle
12
Achten Sie darauf, zu entkommen / Anführungszeichen hinzuzufügen / etc. zu Ihren POST-Daten, wenn Sie diese Route gehen. Eine Alternative ist die Verwendung von json_encode (), das für so ziemlich jeden Datentyp funktioniert. Beispiel: abeautifulsite.net/passing-data-from-php-to-javascript
claviska
Das nenne ich "out of the box" denken.
I.Am.A.Guy
Dies ist mit Sicherheit der einfachste Weg, dies zu tun. Dies funktionierte für mich in WordPress, indem eine neue Themenseite erstellt und die Post-Daten einfach auf Fensterebene wie window.my_prefix_post_data = <? Php echo $ _POST ['my_post']?> Offengelegt wurden. und dann auf diese Weise einfach von jedem beliebigen Bereich aus auf die Post-Daten zugreifen. Dies wird nicht für Websites empfohlen, auf denen ständig viele vertrauliche Post-Daten gespeichert sind, aber für den Umfang unserer Seite / Website funktioniert es hervorragend.
OG Sean
2
Dies ist nicht praktikabel, es könnte ein Problem mit der Charakterflucht geben.
MathieuAuclair
1
Sicher gehackt. Verwenden Sie die oben beschriebene Methode nicht, ohne zu entkommen.
Reggie
10

JavaScript ist eine clientseitige Skriptsprache, dh der gesamte Code wird auf dem Computer des Webbenutzers ausgeführt. Die POST-Variablen gehen dagegen zum Server und befinden sich dort. Browser stellen diese Variablen weder der JavaScript-Umgebung zur Verfügung, noch sollte ein Entwickler erwarten, dass sie auf magische Weise vorhanden sind.

Da der Browser JavaScript den Zugriff auf POST-Daten untersagt, ist es so gut wie unmöglich, die POST-Variablen zu lesen, ohne dass ein externer Akteur wie PHP die POST-Werte in eine Skriptvariable oder eine Erweiterung / ein Addon überträgt, die / das die POST-Werte während der Übertragung erfasst. Die GET-Variablen sind über eine Problemumgehung verfügbar, da sie sich in der URL befinden, die vom Clientcomputer analysiert werden kann.

Platinum Azure
quelle
3
Ich stimme Ihrer -1 nachdrücklich nicht zu. Nirgendwo im OP wurde in der Frage AJAX angegeben, sodass die Möglichkeit von Linkklicks und Formularübermittlungen offen bleibt, die nicht von JavaScript ausgeführt werden. Insbesondere letzteres ist ein Beispiel, bei dem POST-Variablen vorhanden sind, aber auf der Clientseite nicht verfügbar sind, es sei denn, die Serverantwort wird von einem Skript generiert und das Skript wählt die Echoung der Werte der POST-Variablen in den JS-Code. Wenn ich Ihren Kommentar -1 könnte, würde ich.
Platinum Azure
2
Ich spreche nicht von AJAX. Mein Argument bezieht sich auf jede Form von POST-Anfrage. Der Browser kennt jeden Parameter, der im Rahmen der HTTP-Anforderung gesendet wird, einschließlich der URL- und POST-Parameter. Einige dieser Parameter werden für Javascript zur Verfügung gestellt, andere nicht. Es ist einfach eine Einschränkung, die vom Browser auferlegt wird. Es könnte sehr gut den Zugriff auf die POST-Parameter von JS ermöglichen, aber das ist nicht der Fall, das ist die einfache Wahrheit.
GetFree
1
Du verstehst nicht, was ich meine. Niemand wird ein JavaScript schreiben, das erwartet, dass die POST-Variablen verfügbar sind, es sei denn, der Server stellt sie ausdrücklich zur Verfügung. Wenn der Server sie nicht bereitstellt, sind sie für einen Webentwickler, der JavaScript-Code schreibt, möglicherweise überhaupt nicht auf der Clientseite.
Platinum Azure
1
In Ihrer Antwort sagen Sie, dass es nicht möglich ist, was richtig ist. Sie erklären aber auch, warum das nicht möglich ist. Diese Erklärung ist falsch. Deshalb erhalten Sie eine -1
GetFree
3
Meine Erklärung war unvollständig, nicht falsch. Ich habe meine Antwort so bearbeitet, dass auch Sie glücklich sein sollten. Wenn dies nicht der Fall ist, bearbeiten Sie es selbst, anstatt mir -1 zu geben und Kommentare abzugeben.
Platinum Azure
9

Verwenden Sie sessionStorage!

$(function(){
    $('form').submit{
       document.sessionStorage["form-data"] =  $('this').serialize();
       document.location.href = 'another-page.html';
    }
});

Auf einer anderen Seite.html:

var formData = document.sessionStorage["form-data"];

Referenzlink - https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage

Alexandre Parpinelli
quelle
Ein Tippfehler: Sumbit.
Alejandro Salamanca Mazuelo
Was ist, wenn die Post-Anfrage von einer Subdomain oder einer anderen Domain stammt? Empfängnis kaputt.
undefiniert
Es sollte seinform.on('submit',function(){document.sessionStorage["form-data"] = $('this').serialize();window.location.href = 'another-page.html';})
Justin Liu
@ZefirZdravkov Sie könnten ein Cookie mit setzen samesite = Noneund Secureso erlaubt Chrome seine Verwendung.
Justin Liu
6

Verwenden Sie localStorage oder eine andere Methode, um den Wert festzulegen, den Sie übergeben möchten.

Auf diese Weise haben Sie von überall Zugriff darauf!

Mit irgendwo meine ich innerhalb der gegebenen Domäne / des gegebenen Kontexts

Ian Mbae
quelle
2
warum nicht einfach ein einfacher Keks?
jj_
1
Was ist, wenn die Post-Anfrage von einer Subdomain oder einer anderen Domain stammt? Empfängnis kaputt.
undefiniert
@ZefirZdravkov, obwohl ich Ihnen in Bezug auf das Vorhandensein der angegebenen Einschränkung zustimme, besteht sie aufgrund browserbasierter Sicherheitsimplementierungen. Ich kann mir den grenzenlosen Horror nur vorstellen, wenn es sich um ein Szenario handelt, in dem jede Website den Inhalt eines anderen lesen kann.
Ian Mbae
@Ian Jede Site kann den Inhalt anderer über CURL oder Ajax lesen. Wenn Sie sich auf "localStorage" einer anderen Site beziehen, dann wäre das abscheulich. Ich sage nur, dass diese Antwort nur funktioniert, wenn Sie POST-Anfragen nur an diese Domain empfangen / senden. Zum Beispiel würde eine POST-Anfrage von cloudianos.comnicht das api.cloudianos.comJavaScript von erreichen, da sie nicht dasselbe teilen localStorage.
undefiniert
2

Sie können den Post-Request-Parameter mit jQuery-PostCapture ( @ ssut / jQuery-PostCapture ) lesen .

Das PostCapture-Plugin besteht aus einigen Tricks.

Wenn Sie auf die Schaltfläche "Senden" klicken, wird das onsubmitEreignis ausgelöst.

Zu diesem Zeitpunkt wird PostCapture Formulardaten serialisieren und in HTML5 localStorage (falls verfügbar) oder Cookie-Speicher speichern.

ssut
quelle
Dies funktioniert nur für Post-Submissions zwischen derselben Domain (Subdomains funktionieren auch nicht)
undefiniert
1

POST ist das, was der Browser vom Client (Ihrem Browser) an den Webserver sendet. Post-Daten werden über http-Header an den Server gesendet und sind nur am Serverende oder zwischen dem Pfad (Beispiel: ein Proxyserver) vom Client (Ihrem Browser) zum Webserver verfügbar. Es kann also nicht mit clientseitigen Skripten wie JavaScript verarbeitet werden. Sie müssen dies über serverseitige Skripte wie CGI, PHP, Java usw. handhaben. Wenn Sie weiterhin in JavaScript schreiben müssen, benötigen Sie einen Webserver, der JavaScript auf Ihrem Server wie Node.js versteht und ausführt

kiranvj
quelle
1

Wenn Sie mit einer Java / REST-API arbeiten, ist eine Problemumgehung einfach. Auf der JSP-Seite können Sie Folgendes tun:

    <%
    String action = request.getParameter("action");
    String postData = request.getParameter("dataInput");
    %>
    <script>
        var doAction = "<% out.print(action); %>";
        var postData = "<% out.print(postData); %>";
        window.alert(doAction + " " + postData);
    </script>
user3260912
quelle
1
<script>
<?php
if($_POST) { // Check to make sure params have been sent via POST
  foreach($_POST as $field => $value) { // Go through each POST param and output as JavaScript variable
    $val = json_encode($value); // Escape value
    $vars .= "var $field = $val;\n";
  }
  echo "<script>\n$vars</script>\n";
}
?>
</script>

Oder verwenden Sie es, um sie in ein Wörterbuch einzufügen, das eine Funktion abrufen könnte:

<script>
<?php
if($_POST) {
  $vars = array();
  foreach($_POST as $field => $value) {
    array_push($vars,"$field:".json_encode($value)); // Push to $vars array so we can just implode() it, escape value
  }
  echo "<script>var post = {".implode(", ",$vars)."}</script>\n"; // Implode array, javascript will interpret as dictionary
}
?>
</script>

Dann in JavaScript:

var myText = post['text'];

// Or use a function instead if you want to do stuff to it first
function Post(variable) {
  // do stuff to variable before returning...
  var thisVar = post[variable];
  return thisVar;
}

Dies ist nur ein Beispiel und sollte nicht verwendet werden für jede sensible Daten wie ein Passwort, usw. Die POST - Methode aus einem Grund besteht; Daten sicher an das Backend zu senden, so dass der Zweck zunichte gemacht würde.

Wenn Sie jedoch nur eine Reihe nicht sensibler Formulardaten benötigen, um zu Ihrer nächsten Seite zu gelangen, ohne /page?blah=value&bleh=value&blahbleh=valueIhre URL zu verwenden, würde dies zu einer saubereren URL führen und Ihr JavaScript kann sofort mit Ihren POST-Daten interagieren.

internetgho5t
quelle
1

Ich habe einen einfachen Code, um es zu machen:

In Ihrer index.php:

<input id="first_post_data" type="hidden" value="<?= $_POST['first_param']; ?>"/>

In Ihrer main.js:

let my_first_post_param = $("#first_post_data").val();

Wenn Sie also main.js in index.php ( <script type="text/javascript" src="./main.js"></script>) aufnehmen, können Sie den Wert Ihrer versteckten Eingabe abrufen, die Ihre Post-Daten enthält.

Louis Hervé
quelle
0

Sie können 'json_encode' verwenden, um zuerst Ihre Post-Variablen über PHP zu codieren. Erstellen Sie dann ein JS-Objekt (Array) aus den JSON-codierten Post-Variablen. Verwenden Sie dann eine JavaScript-Schleife, um diese Variablen zu bearbeiten ... Wie in diesem Beispiel unten, um ein HTML-Formular auszufüllen:

<script>

    <?php $post_vars_json_encode =  json_encode($this->input->post()); ?>

    // SET POST VALUES OBJECT/ARRAY
    var post_value_Arr = <?php echo $post_vars_json_encode; ?>;// creates a JS object with your post variables
    console.log(post_value_Arr);

    // POPULATE FIELDS BASED ON POST VALUES
    for(var key in post_value_Arr){// Loop post variables array

        if(document.getElementById(key)){// Field Exists
            console.log("found post_value_Arr key form field = "+key);
            document.getElementById(key).value = post_value_Arr[key];
        }
    }


</script>
TV-C-15
quelle
0

Eine Möglichkeit besteht darin, ein Cookie in PHP zu setzen.

Beispiel: Ein Cookie mit dem Namen " ungültig" mit dem Wert " $invalidAblauf in 1 Tag":

setcookie('invalid', $invalid, time() + 60 * 60 * 24);

Lesen Sie es dann in JS wieder aus (mithilfe des JS-Cookie- Plugins):

var invalid = Cookies.get('invalid');

if(invalid !== undefined) {
    Cookies.remove('invalid');
}

Sie können jetzt über die invalidVariable in JavaScript auf den Wert zugreifen.

Danny Beckett
quelle
0

Dies hängt davon ab, was Sie als JavaScript definieren. Heutzutage haben wir JS in serverseitigen Programmen wie NodeJS. Es ist genau das gleiche JavaScript, das Sie in Ihrem Browser codieren, außer als Serversprache. Sie können also Folgendes tun: ( Code von Casey Chu: https://stackoverflow.com/a/4310087/5698805 )

var qs = require('querystring');

function (request, response) {
    if (request.method == 'POST') {
        var body = '';

        request.on('data', function (data) {
            body += data;

            // Too much POST data, kill the connection!
            // 1e6 === 1 * Math.pow(10, 6) === 1 * 1000000 ~~~ 1MB
            if (body.length > 1e6)
                request.connection.destroy();
        });

        request.on('end', function () {
            var post = qs.parse(body);
            // use post['blah'], etc.
        });
    }
}

Und daraus post['key'] = newVal;usw ...

William R.
quelle
-1

POST-Variablen stehen dem Browser nur zur Verfügung, wenn derselbe Browser sie überhaupt gesendet hat. Wenn ein anderes Website-Formular per POST an eine andere URL gesendet wird, werden die POST-Daten vom Browser nicht angezeigt.

SITE A: Mit einem Formular, das mit POST SITE B an eine externe URL (Site B) gesendet wird: Empfängt der Besucher, jedoch nur mit GET-Variablen

Chris Denman
quelle
-1
function getParameterByName(name, url) {
            if (!url) url = window.location.href;
            name = name.replace(/[\[\]]/g, "\\$&");
            var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
                results = regex.exec(url);
            if (!results) return null;
            if (!results[2]) return '';
            return decodeURIComponent(results[2].replace(/\+/g, " "));
        }
var formObj = document.getElementById("pageID");
formObj.response_order_id.value = getParameterByName("name");
le cuong
quelle
Dies ist eine GET-Variable, OP hat speziell nach POST var gefragt und festgestellt, dass er bereits leicht GET-Variablen hat.
OG Sean
-3
$(function(){
    $('form').sumbit{
        $('this').serialize();
    }
});

In jQuery gibt Ihnen der obige Code die URL-Zeichenfolge mit POST-Parametern in der URL. Es ist nicht unmöglich, die POST-Parameter zu extrahieren.

Um jQuery verwenden zu können , müssen Sie die jQuery-Bibliothek einschließen. Verwenden Sie dazu Folgendes:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>
Häschen
quelle
4
Dies würde nur die POST - Parameter auf der Seite, wo das Formular abgeschickt wird aus . Es scheint eine sichere Annahme der OP will POST - Parameter auf der Seite das Formular abgeschickt wurde erhalten zu . Das ist unmöglich zu tun.
John Washam
-3

Wir können die mit POST übermittelten Formularparameter mithilfe des Serialisierungskonzepts erfassen .

Versuche dies:

$('form').serialize(); 

Schließen Sie es einfach ein, es zeigt alle Parameter einschließlich versteckter an.

praveen
quelle
-4
<head><script>var xxx = ${params.xxx}</script></head>

Verwenden Sie den EL-Ausdruck $ {param.xxx} in <head>, um Parameter von einer Post-Methode abzurufen, und stellen Sie sicher, dass die js-Datei danach enthalten ist, <head>damit Sie einen Parameter wie 'xxx' direkt in Ihrer js-Datei verarbeiten können.

Mike Miller
quelle