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: passar valor, passar valores, PHP, variáveis Javascript, variáveis PHP
Monday, 14/04/2008 at 11:07 am |
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
Tuesday, 12/08/2008 at 2:53 pm |
Excelente help. Estou a dias procurando uma forma de retornar dados de uma função javascript para o php. Agora, esta super claro.
Obrigado.
Monday, 18/08/2008 at 4:02 pm |
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
Tuesday, 19/08/2008 at 10:34 am |
Muito boa dica!
Parabéns.
Tuesday, 19/08/2008 at 9:06 pm |
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
Tuesday, 07/10/2008 at 11:08 am |
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.?
Saturday, 29/11/2008 at 3:19 pm |
[…] Como passar valores do PHP para o Javascript e vice versa? […]
Friday, 06/11/2009 at 7:12 pm |
Não entendi nada!!! :(
Onde é que o javascript está recebendo o valor de uma variavel PHP ?????
Sunday, 03/01/2010 at 4:30 pm |
Talvez seja necessário vc rever o conceito do que está acontecendo em que lugar. Recomendo para isto o artigo: https://ahaprogramando.wordpress.com/2008/04/05/php-ou-javascript-qual-a-diferenca/
Tuesday, 23/02/2010 at 4:13 pm |
Belo post
bem útil :)
Friday, 21/05/2010 at 11:55 am |
otimo post, me salvou :D
Saturday, 05/06/2010 at 4:22 pm |
MUITO BOM ESSE TITULO!!! Estou inventando um menu da minha cabecinha e derrepente me deparei com esse titulo. Comecei a rir !!!
Wednesday, 04/08/2010 at 2:00 am |
MAIS UMA ALMA SALVA! ALELUIA SENHOR! :)
VALEU VELHO!
ABRAÇO!
Wednesday, 01/09/2010 at 2:25 am |
Muito Grato me ajudou muito!!!
Parabéns pelo site!
Monday, 11/07/2011 at 3:26 pm |
Meu amigo, vc é o cara, parabens pela sua aula e obg pelo seu empenho em nos ajudar.
Sunday, 09/10/2011 at 4:11 pm |
cara, salvou meu tcc! obrigado!
Saturday, 26/11/2011 at 2:11 am |
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!!
Wednesday, 07/12/2011 at 5:53 am |
Muito Obrigado Amigo …. salvou meu trabalho …da faculdade… ja fazia tempo que não encontrava a solução …
Valeu / -o- / -o-/ -o-
Wednesday, 25/01/2012 at 12:52 pm |
No hablo un carajo de tu idioma, pero me ha servido. GRACIAS!1
Thursday, 09/02/2012 at 2:13 pm |
Achei ótimo sua dica!
Parabéns, isso era tudo que eu precisava para resolver o problema de transferencia de dados entre as linguagens.
Valeu!!
Tuesday, 20/03/2012 at 1:41 pm |
BrunoIV Says:
“No hablo un carajo de tu idioma, pero me ha servido. GRACIAS!1″
kkkkkkkkkkkkkkkkkkkkkk
rachei de rir aqui…
Ótimo disclaimer. Obrigado.
Saturday, 05/05/2012 at 9:48 pm |
Também me ajudou, 04 anos depois da publicação do Post
Saturday, 24/11/2012 at 12:50 am |
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???
Saturday, 26/01/2013 at 8:55 am |
$he = ”
document.write(h = screen.width);
“;
Saturday, 26/01/2013 at 10:50 am |
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;
Tuesday, 06/08/2013 at 10:58 am |
Perfeito! Muito obrigado!
Tuesday, 08/10/2013 at 12:36 pm |
Opa, meu post acima , sumiram as tags acima (delimitadores) . Assim vai dar erro !!! Moderador, corri ai , please !
Tuesday, 29/10/2013 at 3:13 pm |
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
Saturday, 24/05/2014 at 10:21 pm |
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.
Wednesday, 17/09/2014 at 9:14 pm |
maravilha, me salvou!!
Sunday, 14/12/2014 at 10:58 pm |
Show de bola meu brother… era isso mesmo que estava precisando, tu é fera…