Passar variáveis JavaScript para PHP via requisição AJAX (GET e POST)

Por: Angelo Luis Ferreira | 21/07/2021 Acessos: 11.847

Neste tutorial vamos mostrar como passar dados definidos em JavaScript para o PHP via requisição AJAX (métodos GET e POST). 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) e Passar variáveis JavaScript para PHP via requisição HTTP ( método GET).

AJAX é o acrônimo para Asynchronous JavaScript And XML (JavaScript Assíncrono e XML). Pode ser considerado como uma tecnologia que utiliza JavaScript e XML para permitir que páginas web trabalhem de modo assíncrono, executando qualquer requisição ao servidor em segundo plano. Isto significa que é possível atualizar partes de uma página web sem precisar carregar a página inteira, possibilitando o desenvolvimento de aplicações mais rápidas e mais amigáveis.

O AJAX utiliza o objeto XMLHttpRequest integrado ao navegador para trocar dados com um servidor web em segundo plano. Atualmente todos os navegadores modernos oferecem suporte para o objeto XMLHttpRequest.

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 uma requisição AJAX (Asynchronous Javascript and XML) pode realizar a transferência de dados sem a necessidade de carregamento de página, melhorando a experiência do usuário que não precisará esperar para ter acesso ao conteúdo solicitado.

c) É importante ressaltarmos que o tráfego de dados que adotamos aqui, entre o navegador web e o servidor, será 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 a transferência de dados do JavaScript para o PHP via requisição AJAX pelos métodos GET e POST.

Procedimentos básicos para uma requisição AJAX

Como já mencionamos, a requisição AJAX é uma tecnologia usada para transferir dados entre cliente e servidor. Para utilizarmos essa tecnologia e transferir dados de variáveis JavaScript (Cliente) para o PHP (Servidor), podemos seguir os passos abaixo:

1) Criar um objeto XMLHttpRequest

Sintaxe:

// cria o objeto XMLHttpRequest
const xhttp = new XMLHttpRequest(); 

Definimos a constante xhttp (pode ser qualquer nome) como um objeto XMLHttpRequest.

Obs.: O objeto XMLHttpRequest está integrado em todos os navegadores modernos.

2) Definir uma função callback

Uma função callback é uma função que passa um parâmetro para uma outra função ou método.

Neste caso, a função callback deve ter o código a ser executado quando a resposta da requisição solicitada estiver pronta (response is redy).

Sintaxe:

// chama a função quando a requisição estiver pronta
xhttp.onload = function() { 
   document.getElementById("demo").innerHTML = this.responseText;
}

Observações:

a) A propriedade onload define a função chamada quando a requisição é recebida (carregada).

b) A propriedade responseText retorna a resposta solicitada como uma string.

c) Utilizamos o método getElementById para manipulação HTML com JavaScript. Neste caso, a resposta fornecida pelo servidor será exibida no local definido pelo marcador HTML identificado como id = "demo".

 3) Enviar uma requisição

Para enviar uma requisição para o servidor, podemos utilizar os métodos open() e send() do objeto XMLHttpRequest.

Sintaxe:

// faz a requisição AJAX - método GET ou POST
xhttp.open("GET ou POST", "localização do arquivo que irá receber a requisição");
xhttp.send(); 

Obs.: O método open(método, url, async) especifica o tipo de requisição e é formado pelos parâmetros:

a) método: GET ou POST

b) url: Localização do arquivo que receberá a requisição

c) async: true (assíncrono) e false (síncrono). Este parâmetro é opcional. Quando omitido significa que a requisição é assíncrona por padrão.

GET ou POST?

Get pode ser utilizado na maioria dos casos e é mais simples e mais rápido que POST.

Entretanto, sempre use a requisição POST quando:

• Precisar enviar uma grande quantidade de dados  para o servidor (POST não tem limitações, enquanto GET só pode enviar 2048 caracteres).
• Se enviar dados de um formulário, por exemplo, POST é mais robusto e mais seguro.
• Um arquivo em cache não é uma opção (ao atualizar um arquivo ou banco de dados no servidor).

Requisição GET

Para transferir dados do JavaScript para o PHP via AJAX pelo método GET, precisaremos acrescentar uma query string no URL do arquivo que irá receber a requisição, tipo: ?chave1=valor1&chave2=valor2.

Sintaxe:

// faz a requisição AJAX - método GET
xhttp.open("GET", "resultString.php?nome="+nome+"&sobrenome="+sobrenome);
xhttp.send();

Requisição POST

Para transferir dados do JavaScript para o PHP via AJAX pelo método POST, precisaremos adicionar um cabeçalho HTTP (header) com com setRequestHeade(). Depois é só especificar os dados que se deseja enviar no método send(), da seguinte forma: chave1=valor1&chave2=valor2.

Sintaxe:

// faz a requisição AJAX - método POST
xhttp.open("POST", "resultString.php");
// adiciona um header para a requisição HTTP
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// especifica os dados que deseja enviar   
xhttp.send("nome="+nome+"&sobrenome="+sobrenome);

Exemplos de transferência de dados JavaScript para PHP via AJAX

Os exemplos a seguir são baseados nos exemplos apresentados nos artigos Passar variáveis JavaScript para PHP via requisição HTTP ( método POST) e Passar variáveis JavaScript para PHP via requisição HTTP ( método GET).

Observações:

Para melhor organização e para evitar a repetição de tags, dividimos cada exemplo em 2 arquivos distintos dentro de um mesmo diretório, sendo um arquivo html e um arquivo php.

O arquivo html irá contemplar o conteúdo da página e o script JavaScript responsável pela definição das variáveis (dados) e pelo processo de requisição.

Já o arquivo PHP irá receber as informações do navegador, ou seja, receber os dados enviados pelo JavaScript, processá-los e retornar esses dados processados no servidor para o navegador, exibindo-os.

1. Variáveis tipo String (texto)

1.1. Requisição AJAX - Método GET (variáveis tipo string)

stringGet.html

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8">      
</head>

<body>

<h1>Passar dados (string) do JavaScript para o PHP</h1>
<button onclick="sendStrings()">Entre com o seu nome e sobrenome</button>

<div id="demo"></div>

<script>
function sendStrings() {
  // define as variáveis nome e sobrenome
  let nome = prompt("Digite o seu nome");
  let sobrenome = prompt("Digite o seu sobrenome");
    
  // REQUISIÇÃO AJAX
  // cria o objeto XMLHttpRequest
  const xhttp = new XMLHttpRequest(); 
  // chama a função quando a requisição é recebida
  xhttp.onload = function() { 
    document.getElementById("demo").innerHTML = this.responseText;
  }
  // faz a requisição AJAX - método GET
  xhttp.open("GET", "resultString.php?nome="+nome+"&sobrenome="+sobrenome);
  xhttp.send();
}
</script>

</body>
</html>

resultString.php

<?php
// recebe os valores da requisição GET
$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;
}

  Para testar o código acima, acesse: https://www.visualdicas.com.br/exemplos/php/exemplo05/stringGet.html 

1.2. Requisição AJAX - Método POST (variáveis tipo string)

stringPost.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">      
</head>    
<body>

<h1>Passar dados (string) do JavaScript para o PHP</h1>
<button onclick="sendStrings()">Entre com o seu nome e sobrenome</button>

<div id="demo"></div>

<script>
function sendStrings() {
  // define as variáveis nome e sobrenome
  let nome = prompt("Digite o seu nome");
  let sobrenome = prompt("Digite o seu sobrenome");
    
  // REQUISIÇÃO AJAX
  // cria o objeto XMLHttpRequest
  const xhttp = new XMLHttpRequest(); 
  // chama a função quando a requisição é recebida
  xhttp.onload = function() { 
    document.getElementById("demo").innerHTML = this.responseText;
  }
  // faz a requisição AJAX - método POST
  xhttp.open("POST", "resultString.php");
  // adiciona um header para a requisição HTTP
  xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  // especifica os dados que deseja enviar   
  xhttp.send("nome="+nome+"&sobrenome="+sobrenome);
}
</script>

</body>
</html>

resultString.php

<?php
// recebe os valores da requisição POST
$nome = filter_input(INPUT_POST, 'nome', FILTER_SANITIZE_SPECIAL_CHARS);
$sobrenome = filter_input(INPUT_POST, 'sobrenome', FILTER_SANITIZE_SPECIAL_CHARS);   

if ($nome && $sobrenome) {
    echo "<br/></br>";
    echo "Meu nome é: ".$nome;
    echo "<br/></br>";
    echo "Meu sobrenome é: ".$sobrenome;
}

Para testar o código acima, acesse: https://www.visualdicas.com.br/exemplos/php/exemplo05/stringPost.html

2. Variáveis numéricas

2.1. Requisição AJAX - Método GET (variáveis numéricas)

numbersGet.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">  

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

<div id="demo"></div>

<script>
  function sendNumbers() {
    // define as variáveis  
    let varInt = window.innerWidth
    let varFloat = (1/4).toFixed(2)    
    
    // REQUISIÇÃO AJAX
    // cria o objeto XMLHttpRequest
    const xhttp = new XMLHttpRequest(); 
    // chama a função quando a requisição é recebida
    xhttp.onload = function() { 
           document.getElementById("demo").innerHTML = this.responseText;
    }
    // faz a requisição AJAX - método GET
    xhttp.open("GET", "resultNumbers.php?largura="+varInt+"&divisor="+varFloat);
    xhttp.send();    
  }  
</script>

</body>
</html>

resultNumbers.php

<?php 
// obter dados 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 no PHP</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,',','.'); 
    } 
}

Para testar o código acima, acesse: https://www.visualdicas.com.br/exemplos/php/exemplo05/numbersGet.html 

2.2. Requisição AJAX - Método POST(variáveis numéricas)

 numbersPost.html

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">  
</head>    
<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>

<div id="demo"></div>

<script>
  function sendNumbers() {
    // define as variáveis  
    let varInt = window.innerWidth
    let varFloat = (1/4).toFixed(2)    
    
    // REQUISIÇÃO AJAX
    // cria o objeto XMLHttpRequest
    const xhttp = new XMLHttpRequest(); 
    // chama a função quando a requisição é recebida
    xhttp.onload = function() { 
           document.getElementById("demo").innerHTML = this.responseText;
    }
    // faz a requisição AJAX - método GET
    xhttp.open("POST", "resultNumbers.php");
    // adiciona um header para a requisição HTTP
    xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    // especifica os dados que deseja enviar   
    xhttp.send("largura="+varInt+"&divisor="+varFloat);  
  }  
</script>

</body>
</html>

resultNumbers.php

<?php 
// obter dados enviados pelo JavaScript
$largura = filter_input(INPUT_POST, 'largura', FILTER_SANITIZE_SPECIAL_CHARS);
$divisor = filter_input(INPUT_POST, '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 no PHP</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,',','.'); 
    } 
}

Para testar o código acima, acesse: https://www.visualdicas.com.br/exemplos/php/exemplo05/numbersPost.html

3. Variáveis tipo array

3.1. Requisição AJAX - Método GET (vetores - array)

arrayGet.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">      
</head>    
<body>
<h1>Passar variáveis tipo array do JavaScript para o PHP</h1>
<button onclick="sendArray()">Clique para passar um array do JavaScript para o PHP</button>

<div id="demo"></div>

<script>
    function sendArray() {
        let produtos = ['mouse', 'teclado', 'monitor', 'desktop', 'notebook'];
        
        // REQUISIÇÃO AJAX
        // cria o objeto XMLHttpRequest
        const xhttp = new XMLHttpRequest(); 
        // chama a função quando a requisição é recebida
        xhttp.onload = function() { 
            document.querySelector("#demo").innerHTML = this.responseText;
        }
        // faz a requisição AJAX - método GET
        xhttp.open("GET", "resultArray.php?array="+produtos);
        xhttp.send();  
    }
</script>

</body>
</html>

 resultArray.php

<?php 
    // obtém dados (string) enviados pelo JavaScript e transforma em array PHP
    //transforma a string de itens separados em array
    $array_produtos = filter_input(INPUT_GET, 'array', FILTER_SANITIZE_SPECIAL_CHARS);
    $array_produtos = explode(",", $array_produtos); // retorna um array

    //mostra o conteúdo do array 
     echo '<br/>';   
     echo "<h2>Produtos (Array obtido do JavaScript)</h2>";
     echo '<pre>';
     print_r($array_produtos ); 
     ?>
    <br/>
    <button onclick="window.location.href='./arrayGet.html'">Voltar</button>

  Para testar o código acima, acesse:  https://www.visualdicas.com.br/exemplos/php/exemplo05/arrayGet.html

3.2. Requisição AJAX - Método POST (vetores - array)

arrayPost.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">      
</head>    
<body>
<h1>Passar variáveis tipo array do JavaScript para o PHP</h1>
<button onclick="sendArray()">Clique para passar um array do JavaScript para o PHP</button>

<div id="demo"></div>

<script>
    function sendArray() {
        let produtos = ['mouse', 'teclado', 'monitor', 'desktop', 'notebook'];
        
    // REQUISIÇÃO AJAX
    // cria o objeto XMLHttpRequest
    const xhttp = new XMLHttpRequest(); 
    // chama a função quando a requisição é recebida
    xhttp.onload = function() { 
           document.querySelector("#demo").innerHTML = this.responseText;
    }
    // faz a requisição AJAX - método POST
    xhttp.open("POST", "resultArray.php");
    // adiciona um header para a requisição HTTP
    xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    // especifica os dados que deseja enviar 
    xhttp.send("array="+produtos);  
    }
</script>

</body>
</html>

resultArray.php

<?php 
    // obtém dados (string) enviados pelo JavaScript e transforma em array PHP
    //transforma a string de itens separados em array
    $array_produtos = filter_input(INPUT_POST, 'array', FILTER_SANITIZE_SPECIAL_CHARS);
    $array_produtos = explode(",", $array_produtos); 

    //mostra o conteúdo do array 
     echo '<br/>';   
     echo "<h2>Produtos (Array obtido do JavaScript)</h2>";
     echo '<pre>';
     print_r($array_produtos ); 
     ?>
    <br/>
    <button onclick="window.location.href='./arrayPost.html'">Voltar</button>

  Para testar o código acima, acesse:  https://www.visualdicas.com.br/exemplos/php/exemplo05/arrayPost.html

Documentação Oficial

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

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

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