Jak czytać parametry żądania posta za pomocą JavaScript

Próbuję odczytać parametry żądania wiadomości z mojego kodu HTML. Potrafię odczytać parametry żądania get za pomocą następującego kodu w JavaScript.

$wnd.location.search

Ale to nie działa w przypadku żądania postu. Czy ktoś może mi powiedzieć, jak odczytać wartości parametrów żądania posta w moim kodzie HTML przy użyciu JavaScript?

Dane POST to dane obsługiwane po stronie serwera . A JavaScript jest po stronie klienta. Nie ma więc możliwości odczytania danych posta za pomocą JavaScript.

Mały kawałek PHP, aby zmusić serwer do wypełnienia zmiennej JavaScript, jest szybki i łatwy:

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

Następnie uzyskaj dostęp do zmiennej JavaScript w normalny sposób.

Pamiętaj, że nie ma gwarancji, że jakiekolwiek dane lub rodzaje danych zostaną opublikowane, chyba że zaznaczysz - wszystkie pola wejściowe są sugestiami, a nie gwarancjami.

JavaScript to język skryptowy po stronie klienta, co oznacza, że ​​cały kod jest wykonywany na komputerze użytkownika sieci. Z drugiej strony zmienne POST trafiają na serwer i tam rezydują. Przeglądarki nie dostarczają tych zmiennych do środowiska JavaScript i żaden programista nie powinien oczekiwać, że w magiczny sposób tam będą.

Ponieważ przeglądarka nie zezwala JavaScriptowi na dostęp do danych POST, odczytanie zmiennych POST jest prawie niemożliwe bez zewnętrznego aktora, takiego jak PHP, odbijającego wartości POST do zmiennej skryptu lub rozszerzenia / dodatku, który przechwytuje wartości POST podczas przesyłania. Zmienne GET są dostępne dzięki obejściu, ponieważ znajdują się w adresie URL, który może zostać przeanalizowany przez komputer kliencki.

Użyj sessionStorage!

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

Na another-page.html:

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

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

Dlaczego nie użyć localStorage lub innego sposobu, aby ustawić wartość, którą chcesz przekazać?

W ten sposób masz do niego dostęp z dowolnego miejsca!

Przez gdziekolwiek to znaczy w kontekście danej domeny /

Możesz odczytać parametr post request za pomocą jQuery-PostCapture ( @ ssut / jQuery-PostCapture ).

Wtyczka PostCapture składa się z kilku sztuczek.

Po kliknięciu przycisku przesyłania onsubmitzdarzenie zostanie wysłane.

W tym czasie PostCapture będzie serializować dane formularzy i zapisywać je w html5 localStorage (jeśli jest dostępny) lub w pamięci cookie.

POST jest tym, co przeglądarka wysyła od klienta (twojej przeglądarki) do serwera WWW. Dane pocztowe są wysyłane do serwera za pośrednictwem nagłówków http i są dostępne tylko na końcu serwera lub pomiędzy ścieżką (na przykład: serwer proxy) od klienta (przeglądarki) do serwera WWW. Dlatego nie można go obsługiwać ze skryptów po stronie klienta, takich jak JavaScript. Musisz obsługiwać to za pomocą skryptów po stronie serwera, takich jak CGI, PHP, Java itp. Jeśli nadal potrzebujesz pisać w JavaScript, musisz mieć serwer WWW, który rozumie i wykonuje JavaScript na twoim serwerze, taki jak Node.js

Jeśli pracujesz z interfejsem API Java / REST, obejście jest łatwe. Na stronie JSP możesz wykonać następujące czynności:

    <%
    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>

<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>

Lub użyj go, aby umieścić je w słowniku, który funkcja może pobrać:

<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>

Następnie w 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;
}

To jest tylko przykład i nie powinno się go używać w przypadku jakichkolwiek poufnych danych, takich jak hasło itp. Metoda POST istnieje nie bez powodu; bezpiecznie przesyłać dane do zaplecza, aby zniweczyć cel.

Ale jeśli potrzebujesz tylko kilku niewrażliwych danych formularza, aby przejść do następnej strony bez adresu /page?blah=value&bleh=value&blahbleh=valueURL, zapewni to bardziej przejrzysty adres URL, a JavaScript będzie mógł natychmiast wchodzić w interakcję z danymi POST.

Mam prosty kod, aby to zrobić:

W twoim index.php:

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

W twoim main.js:

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

Więc kiedy umieścisz main.js w index.php ( <script type="text/javascript" src="./main.js"></script>), możesz uzyskać wartość ukrytych danych wejściowych, które zawierają dane postu.

Możesz „json_encode”, aby najpierw zakodować zmienne postu za pomocą PHP. Następnie utwórz obiekt JS (tablicę) na podstawie zakodowanych w formacie JSON zmiennych post. Następnie użyj pętli JavaScript, aby manipulować tymi zmiennymi ... Jak - w poniższym przykładzie - aby wypełnić formularz HTML:

<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>

Jedną z opcji jest ustawienie pliku cookie w PHP.

Na przykład: plik cookie o nazwie nieprawidłowy, którego $invalidważność wygasa za 1 dzień:

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

Następnie przeczytaj go z powrotem w JS (używając wtyczki JS Cookie ):

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

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

Możesz teraz uzyskać dostęp do wartości ze invalidzmiennej w JavaScript.

To zależy od tego, co zdefiniujesz jako JavaScript. W dzisiejszych czasach faktycznie mamy JS na programach po stronie serwera, takich jak NodeJS. Jest to dokładnie ten sam JavaScript, który kodujesz w przeglądarce, z wyjątkiem języka serwera. Możesz więc zrobić coś takiego: ( Kod autorstwa 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.
        });
    }
}

I stąd wykorzystanie post['key'] = newVal;itp ...

Zmienne POST są dostępne dla przeglądarki tylko wtedy, gdy ta sama przeglądarka wysłała je w pierwszej kolejności. Jeśli inny formularz witryny zostanie przesłany przez POST na inny adres URL, przeglądarka nie zobaczy danych POST.

WITRYNA A: ma formularz przesłany do zewnętrznego adresu URL (witryna B) za pomocą POST SITE B: otrzyma odwiedzającego, ale tylko ze zmiennymi GET

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");

$(function(){
    $('form').sumbit{
        $('this').serialize();
    }
});

W jQuery powyższy kod dałby ci ciąg adresu URL z parametrami POST w adresie URL. Nie jest niemożliwe wyodrębnienie parametrów POST.

Aby użyć jQuery , musisz dołączyć bibliotekę jQuery. Użyj do tego:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>

Możemy zebrać parametry formularza przesłane za pomocą POST z wykorzystaniem koncepcji serializacji .

Spróbuj tego:

$('form').serialize(); 

Po prostu załącz go alert, wyświetla wszystkie parametry, w tym ukryte.

<head><script>var xxx = ${params.xxx}</script></head>

Używając wyrażenia EL $ {param.xxx} in, <head>aby pobrać parametry z metody postu i upewnij się, że plik js jest dołączony po <head>, abyś mógł obsłużyć parametr taki jak „xxx” bezpośrednio w pliku js.