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

About these ads

Tags: , , , ,

21 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. Mateus Says:

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

  15. Ketty Says:

    cara, salvou meu tcc! obrigado!

  16. 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!!

  17. KDU Says:

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

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

  18. BrunoIV Says:

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

  19. 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!!

  20. 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.

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: