Como passar valores do PHP para o Javascript e vice versa?

O que não pode ser ignorado no casamento de Javascript com PHP é que os dois estão rodando em extremos diferentes. Os scripts de Javascript com suas variáveis estão no browser, carregados juntamente com o HTML, e os scripts PHP terão executado suas tarefas do outro lado da WEB, lá no servidor. A única via de comunicação entre eles são os textos (html, javascript…) que transitam no protocolo HTTP. Parece um paradoxo, uma vez que você encontrará PHP, HTML e Javascript no mesmo arquivo index.php (por exemplo). Porém, como dito anteriormente, cada um, PHP e Javascript atua em um ambiente diferente. Por exemplo:

Vamos supor o arquivo teste.php com o conteúdo abaixo:

<html>
____<body>

________<?php echo “Um Hello World !”; ?>
____</body>
</html>

<script type=”text/javascript”>
_____alert(“Outro Hello World!”);
</script>

A parte que está colorida em cinza, é estática puramente texto em forma de tags HTML. A linha que está em vermelho corresponde a um programa em PHP para escrever “Hello World!”, que será interpretada pelo PHP no servidor, e somente o resultado será entregue ao Browser como segue:

<html>
____<body>
________ Um Hello World!
____</body>
</html>
<script type=”text/javascript”>
_____alert(“Outro Hello World!”);
</script>

Por último, a linha colorida em azul também não sofre modificações entre servidor e browser. Todavia o browser a interpretará como um comando para exibir uma pequena Janela com a frase “Hello World” e um botão de OK.

Até aí já dá pra perceber onde cada coisa está acontecendo.

Aproveitando se desta aparente reunião,vc pode construir o texto de um texto Javascript lá no servidor preenchendo o valor de uma variável Javascript usando PHP:

<html>
____<body>

________
<?php echo “Um Hello World!”;
____________$nome_individuo = “Cicrano de Mattos Pinto”;
_________?>
____</body>
</html>

<script type=”text/javascript”>

_____var nome_individuo_1 = “Fulano”;
_____var nome_individuo_2 = <?php echo $nome_individuo; ?>;
_____alert(nome_individuo_1 + ”  ” + nome_individuo_2);
</script>

Como era de se esperar, o browser receberá o seguinte:

<html>
____<body>
________ Um Hello World!
____</body>
</html>
<script type=”text/javascript”>

_____var nome_individuo_1 = “Fulano”;
_____var nome_individuo_2 = “Cicrano de Mattos Pinto”;
_____alert(nome_individuo_1 + ”  ” + nome_individuo_2);
</script>

E pra transferir o valor de uma variável PHP para dentro de um arquivo “.js” ?

Então… não é possível fazer um <? echo… ?> dentro de um arquivo “.js”, porque normalmente isto só funciona dentro de um arquivo .php. Mas é perfeitamente possível um <? echo… ?> dentro de um arquivo “.php” da página (index.php por exemplo…) . Levemos em consideração que esta página também irá carregar arquivos “.js”.
Para isto basta criar variáveis (Javascript) globais (que podem ser do tipo Array), as quais podem ser denominadas “variáveis de ambiente”. Pois irão permitir o trânsito de informações do ambiente HTML+PHP para o âmbito do arquivo Javascript.

<script>
//para não criar muitas variáveis dispersas, é interessante criar um array de variáveis
var VARS_AMBIENTE = new Array();
//em nosso exemplo vamos preencher a variável de ambiente “caminho_servidor”
// a qual terá seu conteúdo fornecido por um echo PHP

VARS_AMBIENTE[‘caminho_servidor’] = <? echo $caminho_server; ?>;
</script>

Reforçando que quando a página HTML + PHP for carregada no browser, o código acima será visto como:

<script>
var VARS_AMBIENTE = new Array();
VARS_AMBIENTE[‘caminho_servidor’] = “algum valor fornecido pelo echo do PHP lá no servidor…”;
</script>

Pois o PHP já terá feito seu trabalho no servidor quando a página for carregada no browser. E então o código do script que estiver no meio do HTML virá do servidor com a variável previamente preenchida.

Continuando a página index.php… agora basta carregar o script que deve ter alguma referência a VARS_AMBIENTE[‘caminho_servidor’] para receber o valor contido nesta variável:

<script src=“meuscript.js”></script>

Pronto! Qualquer código contido dentro de meuscript.js que faça referência a VARS_AMBIENTE[‘caminho_servidor’] terá acesso ao camino do servidor.

E o caminho inverso?

Já do javascript para o PHP, como cada um estará sendo interpretado em uma ponta diferente da web (Javascript – cliente / PHP – servidor), a única forma de enviar dados continua sendo através de tráfego pela rede. Nesta hora uma tag “mágica” pode ajudar:

<form …>

<input type=“hidden” id=“dados” name=“dados_enviar” value=“” />

</form>

<!– Observe que na tag input acima o atributo value foi deixado em branco. Naturalmente se nenhum dado for setado para este atributo, nenhuma informação será recebido no servidor ao executar submit deste formulário.–>

<script>

//aqui a input hidden de id=”dados” recebe um valor dinâmicamente
//via código Javascript:


//cria um objeto de referência à tag input hidden
var objetoDados = document.getElementById(“dados”);
//altera o atributo value desta tag

objetoDados.value = “dados que vão para o servidor”;
</script>

No momento em que estes dados forem “submitados”, poderão ser adquiridos no servidor através de um script PHP que os capture via post por exemplo:
<?

echo $_POST[ dados_enviar];

?>

Dica: Se vc copiar código para testar, reescreva as aspas duplas no editor de texto que vc estiver usando. Pois o WORDPRESS coloca umas aspas mais estéticas que porém não são caracteres válidos nas engines Javascript e PHP.

É isto!

Veja também:

Passar array de PHP para Javascript, e de Javascript para PHP

Tags: , , , ,

43 Responses to “Como passar valores do PHP para o Javascript e vice versa?”

  1. kakaroto Says:

    esse post seu aqui salvou a minha alma eu tava batendo cabeça de como passar valores de java script para php valeu mesmo

    agora vou deixar um problema para ver se tu pode me ajudar

    como eu faço para dar um auto submit em um formulrio de contato
    apos x minutos ?
    um abraço kakaroto :D

  2. Benjamin Davis Lara de MOura Says:

    Excelente help. Estou a dias procurando uma forma de retornar dados de uma função javascript para o php. Agora, esta super claro.
    Obrigado.

  3. raphael Says:

    olá tudo bem?

    só uma pequena observação

    usar

    var objetoDados = document.getElementById(“dados”);
    //altera o atributo value desta tag
    objetoDados.value = “dados que vão para o servidor”;

    não vai funcionar

    pode se usasr

    document.getElementById(“dados”).value = “dados que vão para o servidor”

    qualquer coisa tamos ae =p

  4. Eduardo Says:

    Muito boa dica!
    Parabéns.

  5. Leonir Zimmermann Says:

    Olá raphael, agradeço pelo comentário.
    Quanto ao modo de atribuir os valores, as duas configurações devem
    funcionar, tanto a que apresentei no artigo quanto a que vc relatou no
    comentário. Claro a sua é mais direta, porém no artigo eu quis aproveitar a deixa para evidenciar que um objeto pode ser inteiramente lançado dentro de uma variável. Ou melhor, a variável [objetoDados] conterá uma referência ao objeto, que no caso do artigo era uma tag input. E quem obtém esta referência é o método getElementById.

    var objetoDados = document.getElementById(“dados”);

    //O funcionamento fica mais evidente se vc testar com uma tag div
    //e alterar o conteúdo de texto dela, através da propriedade
    //innerHTML do objeto. Ex:
    objetoDados.innerHTML = “Oeeeiii testando 123…”;

    Grande abraço

  6. william Says:

    bem, isso funciona muito bem. agora eu gostaria de saber como faço quando tenho um array no js. Olha criei um array global onde vou atribuindo valores no js. como faço para pegá-lo com php.?

  7. Passar array de PHP para Javascript, e de Javascript para PHP « Ahã… programando…! Says:

    […] Como passar valores do PHP para o Javascript e vice versa? […]

  8. Sergio Says:

    Não entendi nada!!! :(

    Onde é que o javascript está recebendo o valor de uma variavel PHP ?????

  9. andreluizrodper Says:

    Belo post

    bem útil :)

  10. scarapa Says:

    otimo post, me salvou :D

  11. Fábio José Says:

    MUITO BOM ESSE TITULO!!! Estou inventando um menu da minha cabecinha e derrepente me deparei com esse titulo. Comecei a rir !!!

  12. Cristiano Silva Says:

    MAIS UMA ALMA SALVA! ALELUIA SENHOR! :)
    VALEU VELHO!
    ABRAÇO!

  13. Muito Obrigado Says:

    Muito Grato me ajudou muito!!!

    Parabéns pelo site!

  14. Rodrigo Says:

    Olá me deparei com o título e achei que iria me salvar, mas não foi desta vez….

    vou explicar meu problema….

    tenho uma lista vinda de um BD sendo exibida, esta lista para CADA coluna tenho 1 botão, eu gostaria que dependendo do botão que fosse clicado ele iria para a página X.php(mesma página para todos) mas com o conteúdo referente a coluna do botão clicado.

  15. natan Says:

    olá, o seguinte trecho não funciona no php 5.3.

    var nome_individuo_2 = ““;

    alguma outra aidéia?

  16. Mateus Says:

    Meu amigo, vc é o cara, parabens pela sua aula e obg pelo seu empenho em nos ajudar.

  17. Ketty Says:

    cara, salvou meu tcc! obrigado!

  18. Henrique Says:

    Cara, que linda lógica.
    Aquela sensação de que tudo faz sentido quando a gente percebe como a solução é simples…
    Muito obrigado!
    Valeu mesmo!!

  19. Daniel Says:

    ola teria como manda uns arquivo de exemplo de como faz pra transferir o valor de uma variável PHP para dentro de um arquivo “.js” fico grato!

  20. KDU Says:

    Muito Obrigado Amigo …. salvou meu trabalho …da faculdade… ja fazia tempo que não encontrava a solução …

    Valeu / -o- / -o-/ -o-

  21. BrunoIV Says:

    No hablo un carajo de tu idioma, pero me ha servido. GRACIAS!1

  22. Osvaldo M Costa Says:

    Achei ótimo sua dica!

    Parabéns, isso era tudo que eu precisava para resolver o problema de transferencia de dados entre as linguagens.

    Valeu!!

  23. Adriano Baggio Says:

    Oi, estou tentando fazer com que javascript leia o resultado de um html para dentro de um variavel, sem usar o iframe. pensei no div mas nao soube progama ele.

  24. fabio Says:

    beleza, mas como faço pra resgatar alimentar um campo do tipo select com os dados de um javascript?

  25. Charles Araújo Says:

    BrunoIV Says:
    “No hablo un carajo de tu idioma, pero me ha servido. GRACIAS!1”

    kkkkkkkkkkkkkkkkkkkkkk
    rachei de rir aqui…

    Ótimo disclaimer. Obrigado.

  26. William Says:

    Também me ajudou, 04 anos depois da publicação do Post

  27. Maikel Richard Says:

    tenho o seguinte codigo em java script

    function youtubeFeedCallback( data )
    {
    document.writeln( data.entry[ “media$group” ][ “media$description” ].$t.replace( /\n/g, ” ) + ” );
    }

    como posso passar o output do document.writeln para php

  28. Diovanni Says:

    Olá Leonir Zimmermann,
    Parabéns pelo post, super esclarecedor e útil.
    Porém tenho uma dúvida.
    Tenho um array de objetos em php para passar ao javascript, é possível???
    Ex: tenho um arquivo chamado Produto.php, o qual possui uma classe abstrata com seus atributos, gets e sets. Em outro arquivo php construo um array com instâncias de cada produto (usando estrutura de repetição – for – e setando cada atributo, ok).
    Será que consigo ler esses dados no javascript???

  29. Ronaldo Rodrigues Alcântara Says:

    Olá,
    A todos os programadores Java Script e PHP,
    Meu nome é Ronaldo e gostaria que desse uma olhada no site: http://www.ronaldo.net.br e ver se tem como me ajudar com um projetinho bem simples. o Site tem: (index.html, searchdb.js e mais alguns arquivos em Java Script). O index.html pesquisa dentro do searchdb.js e mostra para o visitante as informações parecidas com as do Google.
    Estou querendo ver uma forma de que o usuário ou visitante possa incluir as informações de sua empresa no site sem ter que preencher um formulário e sem ter que passar por mim para incluir manualmente no searchdb.js para que a partir daí passasse a mostrar as novas inclusões no site. E queria ver também uma forma de que ao incluir as informações gravasse primeiro em um arquivo JS (01.js 02.js 03.js etc.) e que a estrutura do arquivo fosse igual ao arquivo searchdb.js que tem no site, mas que fosse outro nome (números por exemplo) Porque eu tenho um executável que pega as informações desses arquivos e importa para o searchdb.js e se possível também, guardar as informações do searchdb.js em PHP. Ou em vez de tuto isso, o formulário já gravasse direto em PHP e quando alguém fizesse uma busca retornar em searchdb.js
    Exemplo:
    Hoje o Index.html traz para o computador do usuário o arquivo searchdb.js com todo conteúdo dentro dele, ou seja, eu quero evitar isso. Aí que entraria o PHP
    Quando o internauta preenchesse o formulário com a intenção de incluir seu site, sua empresa no http://www.ronaldo.net.br iria gravar em js mas de tempos em tempos eu iria rodar um executável que já tenho hoje e iria importar o conteúdo de todos os js para dentro do searchdb.js
    E quando o usuário visitasse o site e digitasse uma palavra-chave, então uma variável PHP iria dentro do searchdb.js que está no servidor pegaria as informações e retornaria o searchdb.js para o usuário mas o conteúdo dele seria somente com as palavras que ele digitou e não o searchdb.js todo que está no servidor.
    Aguardo uma ajuda, inclusive negociarmos valores R$.
    Ronaldo Rodrigues Alcântara
    E-mail: ronaldo@ronaldo.net.br

  30. Ronaldo Rodrigues Alcântara Says:

    Olá,
    A todos os programadores Java Script, jQuery e PHP,
    Meu nome é Ronaldo e gostaria que desse uma olhada no site: http://www.ronaldo.net.br e ver se tem como me ajudar com um projetinho bem simples. o Site tem: (index.html, searchdb.js e mais alguns arquivos em Java Script). O index.html pesquisa dentro do searchdb.js e mostra para o visitante as informações parecidas com as do Google.
    Estou querendo ver uma forma de que o usuário ou visitante possa incluir as informações de sua empresa no site através de um formulário e que gerasse apenas um TXT ou JS ou HTML etc. Mas que ao cadastrar iria gerar um arquivo com os dados do internauta e esse arquivo gerado por ele tem que ter a mesma estrutura do arquivo searchdb.js e salvo no Servidor
    E de tempos em tempos eu faço downloads dos arquivos para o meu computador e então eu iria rodar um executável que tenho para juntar todos os arquivos baixados e adicionar dentro do searchdb.js depois disso faria o upload novamente para o provedor e o site ficaria atualizado.
    Ou em vez de tudo isso, o formulário já gravasse direto em PHP e quando alguém fizesse uma busca retornar em searchdb.js
    Exemplo:
    Hoje o Index.html traz para o computador do usuário o arquivo searchdb.js com todo conteúdo dentro dele, ou seja, eu quero evitar isso. Aí que entraria o PHP
    Quando o internauta preenchesse o formulário com a intenção de incluir seu site, sua empresa no http://www.ronaldo.net.br iria gravar em PHP mas de tempos em tempos eu iria rodar um executável que já tenho hoje e iria importar o conteúdo do PHP e iria importar para dentro do searchdb.js
    E quando o usuário visitasse o site e digitasse uma palavra-chave, então uma variável PHP iria dentro do searchdb.js ou vise-versa que está no servidor pegaria as informações e retornaria o searchdb.js para o usuário mas o conteúdo dele seria somente com as palavras que ele digitou e não o searchdb.js todo que está no servidor. A menos que digite outras palavras chaves.
    Aguardo uma ajuda, inclusive negociarmos valores R$.
    Ronaldo Rodrigues Alcântara
    E-mail: ronaldo@ronaldo.net.br

  31. Augusto Says:

    $he = ”
    document.write(h = screen.width);
    “;

  32. Augusto Says:

    ultimo posta meu nao deu muito certo não!

    consegui assim:

    h = screen.height;
    w = screen.width;
    document.cookie=”telaheight =” + h;
    document.cookie=”telawidth =” + w;

  33. Edilberto Costa Says:

    Perfeito! Muito obrigado!

  34. Paulo Linhares Says:

    Você pode fazer o inverso (de JS para PHP) de forma mais simples:

    var x = ‘Algum valor aqui’;

    <?php
    echo $x = "document.write(x)”;

    //Isso vai imprimir: Algum valor aqui
    //E sem a necessidade de dar uma volta no servidor !
    Valeu a dica ?

  35. Paulo Linhares Says:

    Opa, meu post acima , sumiram as tags acima (delimitadores) . Assim vai dar erro !!! Moderador, corri ai , please !

  36. TIAGO Says:

    Olá pessoal por favor estou precisando de uma grande ajuda, estou montando um carrinho de compra, o que eu quero fazer é o seguinte.

    Quando eu clico no carrinho de compra, abre o janela estilo uma pop up, e nessa pop up vou chamar uma tela de detalhes do produto.

    e depois que o cliente ver o produto e e clicar no carrinho de compra, quero mandar o nome desse produto para um text area que esta recebendo todos os produtos.

    Sei que esta meio confuso mas mesmo assim preciso muito da ajuda de vocês

    abaixo parte do código que está o produto.

    Produto 1
    Zoom
    Ver

    e agora a função que abre a pop up.

    function abre_detalhes(){
    $(‘html, body’).css(‘overflow’, ‘hidden’);
    $(“html, body”).animate({ scrollTop: 0 }, “slow”);
    $(‘#over’).fadeIn();

    }

    function fecha_detalhes(){
    $(‘#over’).fadeOut();
    $(‘html, body’).css(‘overflow’, ‘auto’);

    }

    x

    Ver

  37. AF Says:

    Olá,
    estou com problemas em receber os dados do javascript para o PHP… Este é o erro que recebo quando carrego a pagina index.php:

    Notice: Undefined index: dados_enviar in C:\wamp\www\JavaScript\passar_valores_PHP_para_Javascript_vice-versa\index.php

    e “varrendo” o array $_GET da seguinte forma:
    var_dump($_GET);
    ele aparece como empty!

    Será que alguém me pode ajudar?

  38. Ederson Says:

    A unica forma que consegui fazer a variável PHP ser lida no javascript foi:

    alert(” ‘.$var.’ “);

    Ou seja: Aspas duplas, aspas simples, ponto antes da variável e o fechamento em espelho.

  39. Luiz Alfredo Mattioli Says:

    maravilha, me salvou!!

  40. Anderson Kemper Says:

    Show de bola meu brother… era isso mesmo que estava precisando, tu é fera…

  41. adailton Says:

    muito bom meu amigo esse post e antigo mais ainda ajuda muito voce me ajudou e muito.

    agora uma pergunta como, verifico uma conta no bd mysql e retorno os dados para variavel javascript?

    exemplo pego o nome e a senha coloco em um formulario cligo em logar ai verifica em um php se tudo der certo retorna a pagina com o nome e idade da pessoa para um html que contem esses dados em uma variavel js.

    • Leonir Zimmermann Says:

      Olá Adailton, sempre me alegro de receber comentários sobre a ajuda que estes POST’s tão velhos ainda oferecem :)

      Porém há anos que não tenho mais trabalhado com programação WEB. Quase nenhuma programação pra ser sincero. É uma paixão linda, encantadora e fascinante que ficou no passado. A vida é assim, nem tudo pelo que o cara se apaixona, será favorável pela vida inteira.

      Mas tenho certeza que vc vai encontrar a resposta naquele grande site de buscas haha!

      Grande Abraço!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


Follow

Get every new post delivered to your Inbox.

%d bloggers like this: