Início /Programação /PHP /Passar variáveis JavaScript para PHP via requisição HTTP ( método POST)

Passar variáveis JavaScript para PHP via requisição HTTP ( método POST)

Por: Angelo Luis Ferreira | 28/05/2021 Acessos: 8.525

Neste tutorial vamos mostrar como passar dados definidos em JavaScript para o PHP via requisição HTTP (método POST). 

Leia também: Passar variáveis JavaScript para PHP via requisição HTTP ( método GET).

HTTP (Hypertext Transfer Protocol) é o protocolo que define as regras de comunicação entre cliente (navegador web / browser) e servidor (web server). Por padrão, o cliente realiza uma requisição para o servidor, enviando informações por meio de um método que pode ser GET ou POST. Este protocolo é muito utilizado em formulários HTML. Para saber mais, leia: Uma visão geral do HTTP e Métodos de requisição HTTP.

Observações :

a) O JavaScript é processado no navegador (front-end) e o PHP no servidor (back-end), portanto, para que haja a efetiva transferência de dados do JavaScript para o PHP de forma dinâmica, é necessário criarmos uma comunicação por meio de requisições cliente-servidor. Neste tutorial vamos utilizar o protocolo HTP como comunicação entre as duas tecnologias (JavaScript e PHP).

b) A Comunicação por meio de requisição HTTP, via GET ou POST, é um procedimento mais simples, porém menos elegante, pois há a necessidade do carregamento de página. Diferentemente, a comunicação por meio de uma requisição AJAX (Asynchronous Javascript and XML) pode realizar a transferência de dados sem a necessidade de carregamento de página.

c) Não podemos esquecer, no entanto, que o tráfego de dados via protocolo HTTP entre o navegador web e o servidor é sempre textual. Portanto, para utilizarmos os dados recebidos de forma adequada vamos precisar transformá-los no tipo de dados que desejarmos através de .

d) Abordaremos neste tutorial apenas a transferência de dados do JavaScript para o PHP via requisição POST.

Passar variáveis JavaScript para PHP via requisição HTTP (Método POST)

Veja abaixo algumas considerações importantes sobre as requisições por meio do método GET:

  1. Requisições POST nunca podem ser armazenadas em cache;
  2. Requisições POST não permanecem no histórico do navegador;
  3. Requisições POST são mais seguras pois os dados não ficam armazenados no histórico do navegador e nem visíveis no URL;
  4. Requisições POST não têm restrições de tamanho;
  5. Não há restrições no tipo de dados transferidos;
  6. Para haver a transferência de dados via POST é necessário que as variáveis JavaScript sejam passadas para um formulário HTML em campos não visíveis (hidden). Ao clicarmos um botão (input ou submit) geramos uma requisição HTTP com os valores dos campos do formulário que serão recebidos pelo PHP.

Nos exemplos a seguir, mostraremos como passar dados de forma dinâmica do JavaScript para o PHP via protocolo HTTP através do método POST. Veja também: Passar variáveis JavaScript para PHP via requisição HTTP ( método GET).

1. Transferência de strings e variáveis numéricas

1.1. Neste exemplo vamos mostrar como transferir dados tipo string e numéricos por meio de uma requisição POST. 

Obs.: Também podemos obter dados tipo string (textos) do JavaScript, utilizando o método document.write(). Leia Passar variável JavaScript para PHP.

1.2. Ao clicarmos no botão "Pegar Dados", obtemos primeiramente as variáveis nome, sobrenome e idade do usuário, assim como a largura da tela do navegador, a divisão de 1 por 4 e a data atualizada a partir do JavaScript.

1.3. Depois, esses dados são passados para um formulário HTML em campos não visíveis, onde utilizamos o atributo type="hidden". O formulário executa a requisição HTTP pelo método POST que transfere os dados para o servidor.

1.4. Ao receber estes dados pelo PHP eles poderão ser utilizados da forma que desejarmos, inclusive podendo ser adicionados em um banco de dados. No nosso exemplo, vamos apenas exibir na tela os dados recebidos pelo PHP.

<!DOCTYPE html>
<html>
<body>

<h1>Passar dados do JavaScript para o PHP - Método POST</h1>
<?php
$nome = filter_input(INPUT_POST, 'campo1', FILTER_SANITIZE_SPECIAL_CHARS);
$sobrenome = filter_input(INPUT_POST, 'campo2', FILTER_SANITIZE_SPECIAL_CHARS);
$idade = (int)filter_input(INPUT_POST, 'campo3', FILTER_SANITIZE_NUMBER_INT);
$larguraTela = filter_input(INPUT_POST, 'campo4', FILTER_VALIDATE_INT);
$division = filter_input(INPUT_POST, 'campo5', FILTER_VALIDATE_FLOAT);
$horaAtual = filter_input(INPUT_POST, 'campo6');
if ($_POST) {
    echo "PEGUEI O NOME: ".$nome." | Tipo de dados: ".gettype($nome)."<br/>";
    echo "PEGUEI O SOBRENOME: ".$sobrenome." | Tipo de dados: ".gettype($sobrenome)."<br/>";
    echo "PEGUEI A IDADE: ".$idade." | Tipo de dados: ".gettype($idade)."<br/>";
    echo "PEGUEI A LARGURA DA TELA : ".$larguraTela." | Tipo de dados: ".gettype($larguraTela)."<br/>";   
    echo "PEGUEI A DIVISÃO 1 POR 4 : ".$division." | Tipo de dados: ".gettype($division)."<br/>";   
    echo "HORA ATUAL : ".$horaAtual." | Tipo de dados: ".gettype($horaAtual)."<br/><br/>";
}
?>

    <form action="" method="POST" id="formteste">
        <input type="hidden" value="" id="nome" name="campo1"> 
        <input type="hidden" value="" id="sobrenome" name="campo2">
        <input type="hidden" value="" id="idade" name="campo3">
        <input type="hidden" value="" id="largura" name="campo4"> 
        <input type='hidden' value="" id="division" name='campo5'>
        <input type="hidden" value="" id="today" name="campo6"> 
        <button onclick="pegarDados()">Pegar Dados</button>      
    </form>

<script>
 function pegarDados() {
    // define variáveis
    let nome = prompt("Digite o seu nome")
    let sobrenome = prompt("Digite o seu sobrenome")
    let idade = prompt("Digite a sua idade")
    let largura = window.innerWidth
    let division = 1/4
    // pegar hora atual
    let today = new Date()
    today = today.toString()
    
    // passa as variáveis para o HTML (form)
    document.getElementById("nome").value = nome
    document.getElementById("sobrenome").value = sobrenome
    document.querySelector("#idade").value = idade   
    document.querySelector("#largura").value = largura
    document.querySelector("#division").value = division
    document.querySelector("#today").value = today
 }
</script>

</body>
</html>
😀 Para testar o código acima, acesse: https://www.visualdicas.com.br/exemplos/php/exemplo04/string.php

Observações:

1.2.1. Ao clicarmos no botão chamamos a função JavaScript que denominamos de pegarDados().

1.2.2. A função pegarDados() atribui os valores às variáveis nome, sobrenome e idade através do método window.prompt(). Depois, a função irá atribuir os valores definidos pelos métodos innerWidth() e toString() ás variáveis largura e today respectivamente. E por último, a variável division receberá o resultado da divisão de 1 por 4.

1.2.3. Usando os métodos JavaScript de manipulação de HTML, document.getElementById() e document.querySelector(), os dados são passados para o formulário e inseridos dentro do atributo value. Depois, esses dados são transferidos para o servidor via requisição HTTP pelo método POST. Este processo é realizado no formulário HTML.

 1.2.4. No servidor, os dados são recebidos pelo PHP e atribuídos às respectivas variáveis por intermédio de filtros executados pela função filter_input(), da seguinte forma:

1.2.4.1. Para as variáveis $nome e $sobrenome utilizamos o filtro FILTER_SANITIZE_SPECIAL_CHARS que só aceita caracteres ASCII, protegendo a variável de códigos maliciosos.

1.2.4.2. Para a variável $idade utilizamos o filtro FILTER_SANITIZE_NUMBER_INT que só recebe números inteiros descartando qualquer outro tipo de caractere. É importante frisar que este filtro mantém o valor da variável como string, pois como mostramos anteriormente, a transferência de dados HTTP é sempre textual. Para transformar o tipo de dado em um número inteiro usamos o modificador (int).

1.2.4.3. Para a variável $larguraTela utilizamos o filtro FILTER_VALIDATE_INT que valida apenas números. Este filtro faz com que o PHP entenda que o valor recebido é um número inteiro, e desta forma o tipo de dados passa automaticamente de string para integer.

1.2.4.4. Para a variável $division utilizamos o filtro  FILTER_VALIDATE_FLOAT que valida apenas números decimais (float). Este filtro faz com que o PHP entenda que o valor recebido é um número decimal, e desta forma o tipo de dados passa automaticamente de string para double, que é o mesmo que float no PHP.

1.2.4.5. Finalmente, para a variável $horaAtual não utilizamos nenhum filtro, pois o valor é padrão do JavaScript e não precisa, neste caso, ser protegido.

1.2.5. Agora que temos todas as variáveis PHP definidas, podemos exibi-las na tela do navegador caso a requisição HTTP tenha sido realizada, ou seja, se $_POST existir e for verdadeiro.

1.2.6. A seguir veja a imagem do resultado do nosso exemplo:

2. Variáveis tipo array

2.1. Da mesma forma que no exemplos anterior, podemos passar dados tipo array do JavaScript para o PHP por meio de um formulário HTTP em campos não visíveis. O formulário executa a requisição HTTP pelo método POST e transfere os dados para o servidor.

2.1.1. A diferença é que neste caso precisamos transformar o valor obtido em um array, lembrando que em uma transferência de dados via requisição HTTP, os valores transferidos são sempre textuais.

2.2. No exemplo a seguir, o array_produtos gerado no script JavaScript, será transferido para o servidor web, convertido e exibido na tela pelo PHP.

<!DOCTYPE html>
<html>
    
<body>

<h1>Passar array do JavaScript para o PHP</h1>
<form action="" method="POST">
<input type="hidden" id="sendArray" name="arrayString" value="" />
<input type="submit" value="Enviar Array do JavaScript para o PHP" />
</form>
<br/>

<?php 
// obter dados (array) enviados pelo JavaScript
//transforma a string de itens separados em um array
$array_produtos = explode(",", $_POST['arrayString']);
//mostra o conteúdo do array
if ($_POST) {
    echo '<pre>';
    print_r($array_produtos);
?>
<br/>
<button onclick="window.location.href='./array.php'">Voltar</button>
<?php 
}
?>

<script>
let array_produtos = ['mouse', 'teclado', 'monitor', 'desktop', 'notebook'];   
document.getElementById("sendArray").value = array_produtos;
</script>

</body>
</html>

 😀 Para testar o código acima, acesse: https://www.visualdicas.com.br/exemplos/php/exemplo04/array.php

Observações:

2.2.1. Ao clicarmos no botão submit do formulário passamos o valor da variável array_produtos para dentro do atributo value no campo não visível (type="hidden"), usando o método document.getElementById() do JavaScript.

2.2.2. O formulário então, executa a requisição HTTP pelo método POST e transfere os dados para o servidor. Podemos agora receber o valor tipo string através da expressão $_POST['arrayString'] do PHP.

2.2.3. Utilizando a função explode() podemos retornar o array formado pela divisão da string a partir de um delimitador, que no caso é a vírgula.

Nota: Neste caso não há necessidade de filtro, pois o valor obtido via requisição POST não poderá ser alterado durante a transferência.

2.2.4. Finalmente, verificamos se a requisição HTTP foi realizada, ou seja, se $_POST existe e é verdadeiro. Se sim, as chaves e os elementos do array serão exibidos na tela através da função print_r().

2.2.5. Adicionalmente, incluímos o botão voltar, que ao ser acionado volta para a página inicial

2.3. Veja na imagem abaixo o resultado do nosso exemplo:

Documentação Oficial

1. [Documentação PHP - Requisição HTTP] » Sobre a requisição HTTP.

1. [Documentação PHP - Função filter_input()] » Sobre a função filter_input().

1. [Documentação PHP - Função explode()] » Sobre a função explode().

2. [Documentação PHP - Função print_r()] » Sobre a função print_r().

O anúncio abaixo ajuda manter o Portal Visual Dicas

Comentários

×

Infomações do site / SEO