Páginas

sexta-feira, 12 de outubro de 2012

Atualizando um elemento automaticamente com JQuery [Parte 1]

------- Básico ------------------------
1º Baixe o JQuery: http://jquery.com/download/
2º Crie 3 arquivos na mesma pasta: index.html, javascript.js e servidor.php
3º Cole o arquivo "JQuery.js" na pasta.
--------------------------------------------

Copie os arquivos ou baixe: https://docs.google.com/file/d/0B-bQtFhTkShjZEdYQ1FjTG1USDA/edit

index.html


<html>
    <head>
        <title>Pagina 1</title>
        <script type="text/javascript" src="jquery-1.8.1.min.js"></script>
        <script type="text/javascript" src="javascript.js"></script>
    </head>
   
    <body bgcolor="silver">
       
        <input type="text" id="valor" /> <!-- enviar o valor  -->
       
        <hr/>       <!-- BARRA  -->
       
        <div id="resultado"></div>    <!-- resultado da página "servidor.php"  -->
           
       
    </body>    
</html>
________________________________________________


javascript.js

function funcao(){
    var texto = $("#valor").val(); //pega o valor do INPUT com a id "valor"
   
    $.post("servidor.php",{ valor:texto }, function(resposta){
        //                       [texto] é uma váriavel com o valor do INPUT "valor"
       
        $("#resultado").html(resposta);
        // irá imprimir a resposta da página "servidor.php" P/ a DIV com id "resultado"
    });
}

window.setInterval("funcao()", 1000);
//                irá atualizar a "funcao()" cada 1 segundos

________________________________________________

servidor.php

<?php
echo $_POST["valor"];
// vai imprimir o valor do INPUT com a id "valor"
?>


Resumindo:



3 comentários:

Celso Leandro Palma disse...

Olá amigo, como está?

Amigo, me fale uma coisa, estou precisando fazer LITERALMENTE isto que você fez, porém o que você fez, é de um campo de form e exibe lá...

porém o que eu preciso que ao invés de pegar este conteúdo da mesma página, ele pegue de um Banco de Dados, tem como fazer isso?

Abs

Celso Leandro Palma disse...

show

Emerson Regonha disse...

Em consulta ao seu site/blog na página [http://www.duduindo.com.br/], onde você explica muito bem, como fazer para Atualizar um elemento dinâmicamente através do JQUERY.

No entanto, gostaria de saber como faço para atualizar mais de um elemento?

Ou seja, digamos que no meu formulário, eu tenho 5 elementos diferentes para serem carregados. Como faço este processo?