Passar variáveis JavaScript para PHP via requisição HTTP ( método GET)
- Detalhes
- Angelo Luis Ferreira
- PHP
- Acessos: 7478
Neste tutorial vamos mostrar como passar dados definidos em JavaScript para o PHP via requisição HTTP (método GET). Este procedimento é muito útil quando utilizamos PHP e JavaScript relacionados.
Leia também: Passar variáveis JavaScript para PHP via requisição HTTP ( método POST)
HTTP (Hypertext Transfer Protocol), resumidamente, pode ser definido como 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.
d) Abordaremos neste tutorial apenas a transferência de dados do JavaScript para o PHP via requisição GET.
Passar variáveis JavaScript para PHP via requisição HTTP (Método GET)
Veja abaixo algumas considerações importantes sobre as requisições por meio do método GET:
a) Requisições GET podem ser armazenadas em cache;
b) Requisições GET permanecem no histórico do navegador;
c) Requisições GET nunca devem ser usadas para dados confidenciais, pois os dados ficam visíveis;
d) Requisições GET têm restrições de tamanho (comprimento máximo de um URL é limitado em 2048 caracteres);
e) Requisições GET são usadas apenas para transferir dados (não alteram dados);
f) Observe que um conjunto de pares chave/valor, denominado query string, é sempre enviado no URL de uma requisição GET, tipo: ?chave1=valor1&chave2=valor2 .
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 GET.
1. Variáveis tipo String (texto)
1.1. Este tipo de dado é o mais simples, pois o conteúdo recebido não precisa ser transformado para ser utilizado no PHP, lembrando que a transferência de dados via protocolo HTTP é sempre textual.
Obs.: Também podemos obter textos do JavaScript de forma ainda mais fácil, utilizando o método document.write(). Leia Passar variável JavaScript para PHP.
1.2. No exemplo abaixo, vamos obter as variáveis nome e o sobrenome do usuário criadas pelo JavaScript. Ao recebermos estes dados pelo PHP podemos utilizá-los da forma que desejarmos, inclusive podendo adicioná-los em um banco de dados. No nosso exemplo, vamos apenas exibir na tela os dados recebidos pelas variáveis $nome e $sobrenome.
<!DOCTYPE html>
<html>
<body>
<h1>Passar dados (string) do JavaScript para o PHP</h1>
<button onclick="sendStrings()">Entre com o seu nome e sobrenome</button>
<?php
// obter dados (string) enviados pelo JavaScript
$nome = filter_input(INPUT_GET, 'nome', FILTER_SANITIZE_SPECIAL_CHARS);
$sobrenome = filter_input(INPUT_GET, 'sobrenome', FILTER_SANITIZE_SPECIAL_CHARS);
if ($nome || $sobrenome) {
echo "<br/></br>";
echo "Meu nome é: ".$nome;
echo "<br/></br>";
echo "Meu sobrenome é: ".$sobrenome;
}
?>
<script>
function sendStrings() {
let nome = prompt("Digite o seu nome");
let sobrenome = prompt("Digite o seu sobrenome");
document.location.href="?nome="+nome+"&sobrenome="+sobrenome
}
</script>
</body>
</html> 
Para testar o código acima, acesse: https://www.visualdicas.com.br/exemplos/php/exemplo03/string.php
Observações:
1.2.1. Ao clicarmos no botão chamamos a função JavaScript que denominamos de sendStrings().
1.2.2. A função sendStrings() capta os valores das variáveis nome e sobrenome através do método window.prompt(). Veja na figura abaixo:
1.2.3. Depois de obtidos os valores e atribuídos às variáveis nome e sobrenome o script redireciona para uma página PHP através da propriedade location.href. No nosso exemplo, redirecionamos para a mesma página string.php onde está localizado o script, gerando uma atualização da página com um novo URL.
1.2.3.1. É muito importante observarmos que a URL de redirecionamento ganhou um complemento formado por um conjunto de pares (chave / valor) denominado de "query string". Veja abaixo a sintaxe padrão de uma query string como complemento de um URL utilizado por uma requisição GET com PHP:
arquivo.php?chave1=valor1&chave2=valor2 1.2.3.1. O primeiro par chave/valor deve ser precedido de interrogação (?) e os demais pares, se existirem, deverão ser precedidos do sinal gráfico (&).
1.2.3.3. No nosso exemplo utilizamos como chaves da query string as variáveis nome e sobrenome.
1.2.4. O PHP obtém os valores nome e sobrenome por meio da função filter_input() e os atribuí às variáveis $nome e $sobrenome. Finalmente, as variáveis são exibidas na tela. Veja na imagem abaixo como deve ficar o resultado do nosso exemplo:
Obs.: Como são variáveis tipo string poderiam ser armazenadas diretamente em um banco de dados sem nenhuma transformação.
1.3. Veja na imagem abaixo, o resultado do nosso exemplo:
2. Variáveis numéricas
2.1. O procedimento para passar dados numéricos criados em JavaScript para o PHP é similar ao que mostramos anteriormente, ou seja, passamos os dados por meio de um redirecionamento da página, onde adicionamos uma query string que é obtida pelo PHP através do método GET.
2.1.1. A diferença é que para utilizarmos ou adicionarmos os valores obtidos em um banco de dados, precisamos transformá-los em valores numéricos, lembrando que em uma transferência de dados via requisição HTTP, os valores são sempre textuais.
2.2. No exemplo abaixo, duas variáveis numéricas, largura e divisor, criadas no navegador pelo JavaScript, serão transferidas para o servidor web, processadas e exibidas na tela pelo PHP.
<!DOCTYPE html>
<html>
<body>
<h1>Passar dados numéricos do JavaScript para o PHP</h1>
<button onclick="sendNumbers()">Pegar o valor a largura da página e dividir por 4</button>
<?php
// obter dados (string) enviados pelo JavaScript
$largura = filter_input(INPUT_GET, 'largura', FILTER_SANITIZE_SPECIAL_CHARS);
$divisor = filter_input(INPUT_GET, 'divisor', FILTER_SANITIZE_SPECIAL_CHARS);
echo "<h2>Dados obtidos do JavaScript</h2>";
if ($largura && $divisor) {
echo "Largura da página: ".$largura." pixels | tipo de dados = ".gettype($largura);
echo "<br/></br>";
echo "Divisor: ".$divisor." | tipo de dados = ".gettype($divisor);
// transformando string em números
echo "<h2>Corrigindo dados</h2>";
$largura = (int)$largura;
$divisor = (float)$divisor;
echo 'Largura da página: '.$largura." pixels | tipo de dados = ".gettype($largura);
echo "<br/></br>";
echo 'Divisor: '.$divisor." | tipo de dados = ".gettype($divisor);
echo "<h2>Largura multiplicado pelo divisor (duas casas decimais)</h2>";
if ($largura <> 0 && $divisor <> 0) {
echo 'Largura da página dividido por 4 = '.number_format($largura*$divisor,2,',','.');
}
}
?>
<script>
function sendNumbers() {
let varInt = window.innerWidth
let varFloat = (1/4).toFixed(2)
document.location.href="?largura="+varInt+"&divisor="+varFloat
}
</script>
</body>
</html> Para testar o código acima, acesse: https://www.visualdicas.com.br/exemplos/php/exemplo03/numbers.php
Observações:
2.2.1. Ao clicarmos no botão chamamos a função JavaScript que denominamos de sendNumbers().
2.2.2. A função sendNumbers() capta o valor da variável varInt através da propriedade window.innerWidth, que retorna a largura da janela do navegador que está sendo utilizado, e calcula o valor da variável varFloat com duas casas decimais.
2.2.3. Depois de obtidos os valores e atribuídos às variáveis varInt e varFloat o script redireciona para a mesma página numbers.php, gerando uma atualização da página com um novo URL acrescido da "query string": ?largura="+varInt+"&divisor="+varFloat.
2.2.4. Como no exemplo anterior o PHP obtém os valores largura e divisor por meio da função filter_input() e os atribuí às variáveis $largura e $divisor.
2.2.5. Como queremos que as variáveis atuem como integer (largura) e float (divisor), podemos transformá-las em números utilizando (int) e (float).
2.2.5.1. Verificamos os tipos de dados antes e depois da conversão por meio da função gettype(). Observe que float e double no PHP são a mesma coisa, e que por questões históricas o valor retornado pela função gettype() é double e nunca float.
DICA: Como os valores recebidos por requisição HTTP são sempre textuais, utilize o filtro FILTER_SANITIZE_SPECIAL_CHARS para proteger o seu código de informações maliciosas que utilizam os caracteres como "<>" e "&".
2.2.6. Finalmente, multiplicamos a largura pelo divisor para obtermos o valor de 1/4 da largura da janela do navegador.
2.2.6.1. Observe que colocamos um filtro if ($largura <> 0 && $divisor <> 0), pois mesmo que o usuário altere a query string, o código somente irá fazer a operação se os valores obtidos forem maior do que zero.
2.3. Veja na imagem abaixo o resultado do nosso exemplo:
3. Variáveis tipo array
3.1. Da mesma forma que nos exemplos anteriores, podemos passar dados tipo array do JavaScript para o PHP por meio de um redirecionamento de página onde adicionamos no URL uma query string que pode ser obtida pelo PHP através do método GET.
3.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.
3.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 variável tipo array do JavaScript para o PHP</h1>
<button onclick="sendArray()">Clique para passar um array do JavaScript para o PHP</button>
<br/>
<?php
// obtém dados (string) enviados pelo JavaScript e transforma em array PHP
//transforma a string de itens separados em array
$array_produtos = explode(",", $_GET['array']);
//mostra o conteúdo do array
if ($_GET['array']) {
echo "<h2>Produtos (Array obtido do JavaScript)</h2>";
echo '<pre>';
print_r($array_produtos );
?>
<br/>
<button onclick="window.location.href='./array.php'">Voltar</button>
<?php
}
?>
<script>
function sendArray() {
let produtos = ['mouse', 'teclado', 'monitor', 'desktop', 'notebook'];
document.location.href="?array="+produtos
}
</script>
</body>
</html> Para testar o código acima, acesse: https://www.visualdicas.com.br/exemplos/php/exemplo03/array.php
Observações:
3.2.1. Ao clicarmos no botão chamamos a função JavaScript denominada de sendArray().
3.2.2. A função sendArray() gera os elementos do array e os atribui à variável produtos. Depois, da mesma forma que nos exemplos anteriores, a propriedade location.href atualiza a página com o URL acrescido do complemento: "?array="+produtos
3.2.3. Usando a expressão $_GET['array'], o PHP obtém o valor da variável produtos como uma string. Para transformarmos a string em um array utilizamos a função explode() que retorna um vetor formado pela divisão da string a partir de um delimitador, que no caso é a vírgula. Leia Como dividir strings em PHP (separe e-mails, urls, textos, tags...).
Nota: Podemos substituir a expressão $_GET['array] pela função filter_input(), que permite diversos filtros para cada tipo de dados. A expressão $_GET pura pode abrir brechas para usuários maliciosos tentarem atacar o sistema.
3.2.4. Finalmente, se existir $_GET['array'], as chaves e os elementos do vetor são exibidos na tela através da função print_r().
3.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().
