Como ler os parâmetros de solicitação de postagem usando JavaScript

94

Estou tentando ler os parâmetros de solicitação de postagem do meu HTML. Posso ler os parâmetros de solicitação get usando o seguinte código em JavaScript.

$wnd.location.search

Mas não funciona para solicitação de postagem. Alguém pode me dizer como ler os valores dos parâmetros de solicitação de postagem no meu HTML usando JavaScript?

DonX
fonte

Respostas:

186

Os dados POST são dados tratados no lado do servidor . E o Javascript está do lado do cliente. Portanto, não há como ler os dados de uma postagem usando JavaScript.

Rahul
fonte
71
Embora a conclusão esteja correta (você não pode obter esses dados do javascript), o raciocínio está errado. O cliente (o navegador) é aquele que envia os dados POST para o servidor em primeiro lugar. Portanto, o cliente sabe muito bem quais são esses dados. A razão real é simplesmente que o navegador não disponibiliza esses dados para javascript (mas poderia perfeitamente).
GetFree
@GetFree: Para que serve esse chamado conhecimento das variáveis ​​POST para um desenvolvedor web? Nenhum desenvolvedor da web escreverá um script do lado do cliente baseado no navegador, possivelmente tornando os dados da postagem disponíveis para JavaScript, pois, como você observou, isso nunca acontece na prática . Assim, no mundo real , a resposta aqui apresentada é correta, assim como a minha.
Platinum Azure
35
@PlatinumAzure, não tenho certeza se você entendeu o ponto. Você diz que os dados POST existem no servidor e, como o javascript é executado no cliente, não há como o JS acessar esses dados. Isso está errado, os dados POST existem tanto no cliente quanto no servidor e a razão pela qual JS não pode acessar esses dados é simplesmente porque o cliente (o navegador) não os disponibiliza para JS. Tão simples como isso.
GetFree
13
@PlatinumAzure, Sim, não pode ser feito por qualquer motivo. Mas se você vai explicar qual é esse motivo, certifique-se de que é o motivo certo. Sua explicação de por que isso não é possível está errada, esse é o ponto.
GetFree
11
Uma vez que os navegadores obtêm coisas como aplicativos da web, aplicativos em execução (frequentemente) 100 por cento no navegador (nenhum servidor, a não ser hospedar arquivos), será uma necessidade natural ser capaz de receber grandes blocos de dados. Há um limite para o tamanho da string de consulta (método GET) (pense em 4K), então a capacidade de ler pedaços maiores de dados POSTED de javascript seria uma ótima ideia IMHO.
Netsi1964
25

Um pequeno pedaço de PHP para fazer o servidor preencher uma variável JavaScript é rápido e fácil:

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

Em seguida, basta acessar a variável JavaScript da maneira normal.

Observe que não há garantia de que qualquer dado ou tipo de dado será postado a menos que você verifique - todos os campos de entrada são sugestões, não garantias.

Roger
fonte
12
Tenha cuidado para escapar / adicionar aspas / etc. para seus dados POST se você seguir este caminho. Uma alternativa é usar json_encode (), que funcionará com praticamente qualquer tipo de dados. Exemplo: abeautifulsite.net/passing-data-from-php-to-javascript
claviska
Isso é o que chamo de pensar fora da caixa.
I.Am.A.Guy de
Esta é a maneira mais simples de fazer isso com certeza. Isso funcionou para mim no wordpress, criando uma nova página de tema e simplesmente expondo os dados da postagem no nível da janela, como window.my_prefix_post_data = <? Php echo $ _POST ['my_post']?>; e, em seguida, acessar os dados de postagem de qualquer escopo facilmente dessa maneira. Isso não seria recomendado para sites com muitos dados confidenciais de postagem circulando o tempo todo, mas para o escopo de nossa página / site funciona muito bem.
OG Sean
2
isso não é viável, pode haver um problema de escape de caractere.
MathieuAuclair,
1
Hackeado, com certeza. Não use o método acima sem escapar.
reggie
10

JavaScript é uma linguagem de script do lado do cliente, o que significa que todo o código é executado na máquina do usuário da web. As variáveis ​​POST, por outro lado, vão para o servidor e residem nele. Os navegadores não fornecem essas variáveis ​​para o ambiente JavaScript, nem qualquer desenvolvedor deve esperar que elas estejam lá magicamente.

Visto que o navegador não permite que o JavaScript acesse os dados POST, é praticamente impossível ler as variáveis ​​POST sem um ator externo como o PHP ecoando os valores POST em uma variável de script ou uma extensão / addon que captura os valores POST em trânsito. As variáveis ​​GET estão disponíveis por meio de uma solução alternativa porque estão na URL que pode ser analisada pela máquina cliente.

Platinum Azure
fonte
3
Discordo enfaticamente do seu -1. Em nenhum lugar do OP a questão especificava AJAX, de modo que deixa em aberto a possibilidade de cliques em links e envios de formulários não realizados por JavaScript. O último em particular é um exemplo em que variáveis ​​POST existem, mas não estão disponíveis no lado do cliente, a menos que a resposta do servidor seja gerada por um script e o script opte por ecoar os valores das variáveis ​​POST no código JS. Se eu pudesse -1 seu comentário, eu o faria.
Platinum Azure
2
Não estou falando sobre AJAX. Meu argumento se refere a qualquer forma de solicitação POST. O navegador conhece cada parâmetro enviado como parte da solicitação HTTP, que inclui, entre outros, a URL e os parâmetros POST. Alguns desses parâmetros são disponibilizados para javascript, outros não. É simplesmente uma restrição imposta pelo navegador, poderia muito bem dar acesso aos parâmetros POST do JS, mas não dá, essa é a verdade.
GetFree
1
Você não está entendendo meu ponto. Ninguém escreverá um JavaScript esperando que as variáveis ​​POST estejam disponíveis, a menos que o servidor as forneça explicitamente. Se o servidor não os fornecer, no que diz respeito a um desenvolvedor da Web que escreve código JavaScript, eles podem muito bem não estar no lado do cliente.
Platinum Azure
3
Minha explicação estava incompleta, não errada. Editei minha resposta para que até você fique feliz. Se não estiver, em vez de me dar -1 e comentários maliciosos, edite você mesmo.
Platinum Azure de
1
O que eu quis dizer com isso é que um servidor não os expõe ao cliente como dados GET, mas sim o cliente é capaz de analisar novamente a URL para eles. Os dados POST, por outro lado, não estarão no URL. Fico feliz em mudar o idioma, se desejar, mas a reivindicação não está em disputa.
Platinum Azure de
9

Use sessionStorage!

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

Em outra página.html:

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

Link de referência - https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage

Alexandre Parpinelli
fonte
Um erro de digitação: sumbit.
Alejandro Salamanca Mazuelo
E se a solicitação de postagem vier de um subdomínio ou outro domínio? A concepção estourou.
indefinido
Deveria serform.on('submit',function(){document.sessionStorage["form-data"] = $('this').serialize();window.location.href = 'another-page.html';})
Justin Liu
@ZefirZdravkov Você pode definir um cookie com samesite = Nonee Secureassim o Chrome permite seu uso.
Justin Liu
6

Por que não usar localStorage ou qualquer outra forma de definir o valor que você gostaria de passar?

Dessa forma, você tem acesso a ele de qualquer lugar!

Em qualquer lugar, quero dizer dentro de um determinado domínio / contexto

Ian Mbae
fonte
2
por que não um simples biscoito?
jj_
1
E se a solicitação de postagem vier de um subdomínio ou outro domínio? A concepção estourou.
indefinido
@ZefirZdravkov, embora eu concorde com você sobre a existência da limitação fornecida, ela existe devido a implementações de segurança baseadas em navegador. Eu só posso imaginar o horror sem limites se fosse um cenário de 'qualquer site pode ler o conteúdo de qualquer outro'.
Ian Mbae
@Ian Qualquer site pode ler o conteúdo de qualquer outro via CURL ou Ajax. Se se referindo a 'qualquer outro site localStorage', então, sim, isso seria abominável. Tudo o que estou dizendo é que esta resposta só funcionará se você estiver recebendo / enviando solicitações POST apenas para este domínio. Por exemplo, uma solicitação POST de cloudianos.comnão alcançaria api.cloudianos.como JavaScript de, pois eles não compartilham o mesmo localStorage.
indefinido
2

Você pode ler o parâmetro de pós-solicitação com jQuery-PostCapture ( @ ssut / jQuery-PostCapture ).

O plugin PostCapture consiste em alguns truques.

Quando você clicar no botão enviar, o onsubmitevento será despachado.

Nesse momento, o PostCapture serializará os dados do formulário e salvará em html5 localStorage (se disponível) ou armazenamento de cookies.

ssut
fonte
Isso só funcionará para envios de postagem entre o mesmo domínio (os subdomínios também não funcionarão)
indefinido
1

POST é o que o navegador envia do cliente (seu navegador) para o servidor web. Os dados de postagem são enviados para o servidor por meio de cabeçalhos http e estão disponíveis apenas na extremidade do servidor ou entre o caminho (exemplo: um servidor proxy) do cliente (seu navegador) para o servidor web. Portanto, não pode ser manipulado a partir de scripts do lado do cliente, como JavaScript. Você precisa lidar com isso por meio de scripts do lado do servidor como CGI, PHP, Java etc. Se você ainda precisa escrever em JavaScript, você precisa ter um servidor web que entenda e execute JavaScript em seu servidor, como Node.js

Kiranvj
fonte
1

Se você estiver trabalhando com uma API Java / REST, uma solução alternativa é fácil. Na página JSP, você pode fazer o seguinte:

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

Ou use-o para colocá-los em um dicionário que uma função possa recuperar:

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

Depois, em 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;
}

Este é apenas um exemplo e não deve ser utilizada para qualquer de dados sensíveis, como uma palavra-passe, etc. existe método POST O para uma razão; para enviar dados com segurança ao back-end, de forma que isso iria contra o propósito.

Mas se você só precisa de um monte de dados de formulário não confidenciais para ir para a próxima página sem /page?blah=value&bleh=value&blahbleh=valueno seu url, isso tornaria um url mais limpo e seu JavaScript pode interagir imediatamente com seus dados de POST.

internetgho5t
fonte
1

Eu tenho um código simples para fazer isso:

Em seu index.php:

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

Em seu main.js:

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

Portanto, quando você incluir main.js em index.php ( <script type="text/javascript" src="./main.js"></script>), poderá obter o valor de sua entrada oculta que contém seus dados de postagem.

Louis Hervé
fonte
0

Você pode 'json_encode' para codificar primeiro suas variáveis ​​de postagem via PHP. Em seguida, crie um objeto JS (array) a partir das variáveis ​​post codificadas em JSON. Em seguida, use um loop JavaScript para manipular essas variáveis ​​... Como - neste exemplo abaixo - para preencher um formulário de formulário 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>
TV-C-15
fonte
0

Uma opção é definir um cookie no PHP.

Por exemplo: um cookie denominado inválido com o valor de $invalidexpiração em 1 dia:

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

Em seguida, leia novamente em JS (usando o plugin JS Cookie ):

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

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

Agora você pode acessar o valor da invalidvariável em JavaScript.

Danny Beckett
fonte
0

Depende do que você define como JavaScript. Hoje em dia, temos JS em programas do lado do servidor, como NodeJS. É exatamente o mesmo JavaScript que você codifica em seu navegador, exceto como uma linguagem de servidor. Então, você pode fazer algo assim: ( Código de 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.
        });
    }
}

E daí usar post['key'] = newVal;etc ...

William R.
fonte
-1

Variáveis ​​POST só estão disponíveis para o navegador se esse mesmo navegador as enviou em primeiro lugar. Se outro formulário de site for enviado via POST para outro URL, o navegador não verá os dados do POST chegando.

SITE A: possui um formulário de envio para uma URL externa (site B) usando POST SITE B: receberá o visitante mas apenas com variáveis ​​GET

Chris Denman
fonte
-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
fonte
Esta é a variável GET, OP pediu especificamente para POST var e notou que já tem variáveis ​​GET facilmente.
OG Sean
-3
$(function(){
    $('form').sumbit{
        $('this').serialize();
    }
});

Em jQuery, o código acima forneceria a string URL com parâmetros POST na URL. Não é impossível extrair os parâmetros POST.

Para usar jQuery , você precisa incluir a biblioteca jQuery. Use o seguinte para isso:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>
Coelhinho
fonte
4
Isso só iria pegar os parâmetros post sobre a página onde o formulário está sendo enviado a partir . Parece uma suposição segura o OP quer obter parâmetros POST na página do formulário foi enviado para . Isso é impossível de fazer.
John Washam
-3

Podemos coletar os parâmetros de formulário enviados usando POST com o uso de conceito de serialização .

Experimente isto:

$('form').serialize(); 

Basta incluí-lo em alerta, ele exibe todos os parâmetros incluindo ocultos.

Praveen
fonte
-4
<head><script>var xxx = ${params.xxx}</script></head>

Usando a expressão EL $ {param.xxx} <head>para obter parâmetros de um método post e certifique-se de que o arquivo js seja incluído depois <head>para que você possa manipular um parâmetro como 'xxx' diretamente em seu arquivo js.

MikeMiller
fonte