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


92

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?

Odpowiedzi:


184

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.


69
Chociaż wniosek jest poprawny (nie można uzyskać tych danych z javascript), rozumowanie jest błędne. Klient (przeglądarka) to ten, który w pierwszej kolejności wysyła dane POST do serwera. Klient wie więc bardzo dobrze, jakie to dane. Rzeczywistym powodem jest po prostu to, że przeglądarka nie udostępnia tych danych javascript (ale doskonale może).
GetFree

@GetFree: Po co ta tak zwana znajomość zmiennych POST dla programisty? Żaden programista stron internetowych nie napisze skryptu po stronie klienta opartego na przeglądarce, prawdopodobnie udostępniając dane postu JavaScriptowi, ponieważ, jak zauważyłeś, nigdy nie zdarza się to w praktyce . Zatem w prawdziwym świecie przedstawiona tutaj odpowiedź jest poprawna, podobnie jak moja własna.
Platinum Azure

34
@PlatinumAzure, nie jestem pewien, czy rozumiesz o co chodzi. Mówisz, że dane POST istnieją na serwerze, a ponieważ javascript działa na kliencie, nie ma możliwości, aby JS mógł uzyskać dostęp do tych danych. To nieprawda, dane POST istnieją zarówno w kliencie, jak i na serwerze, a powodem, dla którego JS nie może uzyskać dostępu do tych danych, jest po prostu to, że klient (przeglądarka) nie udostępnia ich JS. Tak proste jak to.
GetFree

13
@PlatinumAzure, tak, nie można tego zrobić z jakiegokolwiek powodu. Ale jeśli masz zamiar wyjaśnić, jaki jest ten powód, upewnij się, że jest to właściwy powód. Wyjaśnienie, dlaczego nie jest to możliwe, jest błędne, o to chodzi.
GetFree

10
Ponieważ przeglądarki uzyskują takie rzeczy, jak aplikacje internetowe, aplikacje działające (często) w 100% w przeglądarce (bez serwera, poza hostingiem plików), stanie się naturalną potrzebą odbierania większych porcji danych. Istnieje ograniczenie rozmiaru ciągu zapytania (metoda GET) (myślę, że 4K), więc możliwość odczytu większych fragmentów danych POSTED z javascript byłaby świetnym pomysłem IMHO.
Netsi1964,

26

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.


12
Uważaj, aby uciec / dodać cudzysłowy / itp. do danych POST, jeśli wybierzesz tę trasę. Alternatywą jest użycie json_encode (), która będzie działać dla prawie każdego typu danych. Przykład: abeautifulsite.net/passing-data-from-php-to-javascript
claviska

To właśnie nazywam myśleniem nieszablonowym.
I.Am.A. Guy

Z pewnością jest to najprostszy sposób. To zadziałało dla mnie w wordpressie, tworząc nową stronę motywu i po prostu ujawniając dane postu na poziomie okna, np. Window.my_prefix_post_data = <? Php echo $ _POST ['my_post']?>; a następnie w ten sposób łatwo uzyskać dostęp do danych postu z dowolnego zakresu. Nie byłoby to zalecane w przypadku witryn z dużą ilością wrażliwych danych, które przechodzą przez cały czas, ale w zakresie naszej strony / witryny działa świetnie.
OG Sean,

2
to nie jest wykonalne, może wystąpić problem z ucieczką postaci.
MathieuAuclair

1
Na pewno zhakowany. Nie używaj powyższej metody bez ucieczki.
reggie

10

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.


3
Zdecydowanie nie zgadzam się z twoim -1. Nigdzie w PO pytanie nie określało AJAX, co pozostawia otwartą możliwość klikania linków i przesyłania formularzy nie wykonywanych przez JavaScript. W szczególności ten ostatni jest przykładem, w którym zmienne POST istnieją, ale nie są dostępne po stronie klienta, chyba że odpowiedź serwera jest generowana przez skrypt, a skrypt zdecyduje się na echo wartości zmiennych POST w kodzie JS. Gdybym mógł -1 twój komentarz, zrobiłbym to.
Platinum Azure

2
Nie mówię o AJAX. Mój argument odnosi się do dowolnej formy żądania POST. Przeglądarka zna każdy parametr wysyłany w ramach żądania HTTP, w tym m.in. adres URL oraz parametry POST. Niektóre z tych parametrów są udostępniane javascript, a inne nie. To po prostu ograniczenie narzucone przez przeglądarkę, może bardzo dobrze dać dostęp do parametrów POST z JS, ale tak nie jest, taka jest prawda.
GetFree

1
Nie rozumiesz, o co mi chodzi. Nikt nie napisze JavaScript, oczekując, że zmienne POST będą dostępne, chyba że serwer wyraźnie je dostarczy. Jeśli serwer ich nie udostępnia, to jeśli chodzi o programistę WWW piszącego kod JavaScript, równie dobrze mogą one w ogóle nie być po stronie klienta.
Platinum Azure

1
W swojej odpowiedzi mówisz, że to niemożliwe, co jest poprawne. Ale wyjaśnisz też, dlaczego nie jest to możliwe. To wyjaśnienie jest błędne. Dlatego otrzymujesz -1
GetFree

3
Moje wyjaśnienie było niepełne, nie błędne. Zredagowałem moją odpowiedź tak, że nawet ty powinieneś być szczęśliwy. Jeśli nie, to zamiast dawać mi -1 i złośliwe komentarze, edytuj to samodzielnie.
Platinum Azure,

9

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


Literówka: sumbit.
Alejandro Salamanca Mazuelo

Co się stanie, jeśli żądanie wpisu pochodzi z subdomeny lub innej domeny? Poczęcie upadło.
undefined

Powinno byćform.on('submit',function(){document.sessionStorage["form-data"] = $('this').serialize();window.location.href = 'another-page.html';})
Justin Liu

@ZefirZdravkov Można było ustawić ciasteczko ze samesite = Nonei Securetak chrom umożliwia jej stosowanie.
Justin Liu

6

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 /


2
dlaczego nie zwykłe ciasteczko?
jj_

1
Co się stanie, jeśli żądanie wpisu pochodzi z subdomeny lub innej domeny? Poczęcie upadło.
undefined

@ZefirZdravkov, chociaż zgadzam się z Tobą co do istnienia danego ograniczenia, istnieje ono z powodu implementacji zabezpieczeń opartych na przeglądarce. Mogę sobie tylko wyobrazić bezgraniczny horror, gdyby był to scenariusz „każda witryna może odczytać treść każdej innej”.
Ian Mbae

@Ian Każda witryna może w rzeczywistości odczytywać zawartość innych osób za pośrednictwem CURL lub Ajax. Jeśli odnosisz się do „localStorage jakiejkolwiek innej witryny”, to tak, byłoby to ohydne. Mówię tylko, że ta odpowiedź zadziała tylko wtedy, gdy otrzymujesz / wysyłasz żądania POST tylko do tej domeny. Na przykład żądanie POST od cloudianos.comnie dotarłoby do api.cloudianos.comJavaScript, ponieważ nie mają tego samego localStorage.
nieokreślony

2

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.


Będzie to działać tylko w przypadku przesyłania postów między tą samą domeną (subdomeny też nie będą działać)
undefined

1

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


1

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>

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>

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.


1

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.


0

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>

0

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.


0

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


-1

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


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

To jest zmienna GET, OP poprosił specjalnie o zmienną POST i zauważył, że ma już zmienne GET z łatwością.
OG Sean,

-3
$(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>

4
To dostanie tylko parametry posta na stronie, gdzie forma jest przekazywanych z . Wydaje bezpieczne założenie PO chce uzyskać parametry POST na stronie formularz został przedłożony do . To niemożliwe.
John Washam

-3

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.


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

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.