Adicionar a Meu favorito

Friday, 07 de April de 2006

Bom pessoal, hoje aprenderemos como fazer uma busca dinâmica utilizando PHP + MySql + Ajax (Javascript + XML).

Nosso objetivo será o seguinte: Pesquisar pelo nome das pessoas que estão cadastradas no banco de dados, sem que a página seja recarregada (a grande magia do AJAX); a página terá um campo que receberá as informações do usuário, para pesquisa. Na medida que uma palavra é digitada, o script envia uma requisição ao servidor e exibe os registros que estão sendo encontrados.

Bom vamos ao codigo:

Criando a tabela

CREATE TABLE `pessoa` ( `id_pessoa` int(10) unsigned NOT NULL auto_increment, `nome` varchar(45) default NULL, PRIMARY KEY (`id_pessoa`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Inserindo dados no banco

INSERT INTO `pessoa` (`id_pessoa`,`nome`) VALUES (1,'ALEXANDRE VIEIRA DE OLIVEIRA'), INSERT INTO `pessoa` (`id_pessoa`,`nome`) VALUES (2,'ALEXANDRE TESTANDO'), INSERT INTO `pessoa` (`id_pessoa`,`nome`) VALUES (3,'WAGNER DOS SANTOS'), INSERT INTO `pessoa` (`id_pessoa`,`nome`) VALUES (4,'VIRGINIA'), INSERT INTO `pessoa` (`id_pessoa`,`nome`) VALUES (5,'PEDALA ROBINHO'), INSERT INTO `pessoa` (`id_pessoa`,`nome`) VALUES (6,'MASSA DEMAIS');

Página index.php

<- BUSCA DIN&Acirc;MICA ->

DIGITE AQUI O NOME DA PESSOA:

Arquivo de javascript usado: script.js

// JavaScript Document // FUNÇÃO RESPONSÁVEL DE CONECTAR A UMA PAGINA EXTERNA NO NOSSO CASO A BUSCA_NOME.PHP // E RETORNAR OS RESULTADOS function ajax(url) { //alert(nick); //alert(dest); //alert(msg); req = null; // Procura por um objeto nativo (Mozilla/Safari) if (window.XMLHttpRequest) { req = new XMLHttpRequest(); req.onreadystatechange = processReqChange; req.open("GET",url,true); req.send(null); // Procura por uma versão ActiveX (IE) } else if (window.ActiveXObject) { req = new ActiveXObject("Microsoft.XMLHTTP"); if (req) { req.onreadystatechange = processReqChange; req.open("GET",url,true); req.send(); } } } function processReqChange() { // apenas quando o estado for "completado" if (req.readyState == 4) { // apenas se o servidor retornar "OK" if (req.status ==200) { // procura pela div id="pagina" e insere o conteudo // retornado nela, como texto HTML document.getElementById('pagina').innerHTML = req.responseText; } else { alert("Houve um problema ao obter os dados:" + req.statusText); } } }

E a página que faz a busca em si: busca_nome.php

0){ //EXECUTA UM LOOP PARA MOSTRAR OS NOMES DAS PESSOAS // VALE LEMBRAR QUE TODOS ESSES RESULTADOS SERAO MOSTRADOS DENTRO DA PAGINA INDEX.PHP // DENTRO DO DIV 'PAGINA' while($pegar=mysql_fetch_array($resultado)) echo "$pegar[nome] "; } } ?>

É isso ae, espero que tenham gostado do artigo, qualquer dúvida entrem em contato: [email protected]

Até mais.

Outros artigos

Assine o Feed desta categoria

• Listando Diretórios e Sub-Diretorios dinamicamente em PHP - 14/11/2005
• Trabalhando com Cookies no PHP - 09/07/2005
• Sistema de Usuários on line - 06/07/2005
• Verificando a existência de arquivos ou diretórios no PHP - 18/05/2005
• Ver mais...

Comentários do artigo [Novo comentário]