Como passar dados do PHP para JavaScript: guia completo com exemplos

Como passar dados do PHP para JavaScript: perguntas frequentes e respostas

Você já escreveu um script PHP, gerou um array com dados do banco e depois percebeu, com horror, que o código JavaScript na mesma página não sabe nada sobre isso? Situação familiar. O PHP roda no servidor, o JavaScript no navegador do usuário. São dois mundos diferentes, separados por tempo e espaço. Mas como fazê-los se comunicar? Como passar variáveis e dados do PHP para o JavaScript?

Este tópico é uma das perguntas mais populares no Stack Overflow (dezenas de milhares de visualizações!). E não é à toa: a interação entre código servidor e cliente é uma habilidade fundamental para qualquer desenvolvedor web. Neste artigo, vamos explorar 5 maneiras comprovadas de passar dados do PHP para JavaScript, das mais simples às mais avançadas. Vamos lá!

Por que PHP e JavaScript simplesmente não conversam?

Antes de mergulhar no código, vamos entender a arquitetura. Quando um usuário solicita uma página, acontece o seguinte:

\n
1. O servidor executa o script PHP.
\n
2. O PHP gera o HTML (e pode inserir JavaScript nele).
\n
3. O servidor envia o código HTML pronto para o navegador.
\n
4. O navegador renderiza a página e executa o JavaScript.
\n

Ponto-chave: O PHP é executado antes que o JavaScript veja a página. Portanto, passar variáveis do PHP para o JavaScript só é possível durante a fase de geração do HTML. O JavaScript não pode "solicitar" dados do PHP depois que a página é carregada (para isso existe o AJAX, mas isso é outra história).

Método 1: Incorporando PHP diretamente no JavaScript (o mais simples)

A maneira mais óbvia é exibir a variável PHP diretamente no código JavaScript gerado pelo servidor. Exemplo:

<?php\n$userName = "João";\n$userAge = 28;\n?>\n\n<script>\n    var name = "<?php echo $userName; ?>";\n    var age = <?php echo $userAge; ?>;\n    console.log("Olá, " + name + "! Você tem " + age + " anos.");\n</script>\n

Funciona? Sim. Bonito? Nem tanto. As desvantagens são óbvias:

\n
• O código fica bagunçado e difícil de ler.
\n
• Se a variável contiver aspas ou tags HTML, você terá um erro de sintaxe no JavaScript.
\n
• Segurança? Esqueça: ataques XSS agradecerão.
\n

Este método só é adequado para strings simples sem caracteres especiais (por exemplo, ID de registro ou número de página). Para todo o resto, use os métodos a seguir.

Método 2: JSON — o rei da transferência de dados

JSON (JavaScript Object Notation) é o formato padrão para troca de dados entre servidor e cliente. O PHP pode transformar qualquer array ou objeto em JSON com uma única função json_encode(). O JavaScript, por sua vez, faz o parsing do JSON facilmente.

Exemplo: passando um array de usuários do PHP para o JavaScript.

<?php\n$users = [\n    ['name' => 'João', 'age' => 25],\n    ['name' => 'Maria', 'age' => 30],\n    ['name' => 'Pedro', 'age' => 35]\n];\n$jsonUsers = json_encode($users, JSON_UNESCAPED_UNICODE);\n?>\n\n<script>\n    var users = <?php echo $jsonUsers; ?>;\n    console.log(users[0].name); // "João"\n    console.log(users.length); // 3\n</script>\n

Por que isso é incrível?

\n
• Seguro: json_encode() escapa automaticamente caracteres especiais.
\n
• Versátil: passe strings, números, arrays, objetos, valores booleanos.
\n
• Limpo: o código é fácil de ler e manter.
\n

O único detalhe é que os dados são incorporados diretamente no código HTML da página. Se houver muitos dados, a página ficará mais pesada. Mas para a maioria das tarefas, esta é a opção ideal.

Método 3: Atributos data do HTML (para transferência via DOM)

Às vezes, você precisa passar dados associados a um elemento específico na página. Por exemplo