Olá! Tuesday, 19 de March de 2024.



Dicas CódigoFonte.net
Friday, 07 de April de 2006

Busca Dinâmica utilizando AJAX

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ÂMICA
<- 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.

Comentários do artigo [Novo comentário]

Efraim Dutra - 17 de May de 2015 - 12:09
Eu gostaria de parabeniza-lo pelo tutorial , peguei este script a muito tempo atrás e coloquei mais uns arquivos , tinha me esquecido de te dar o mérito , agora encontrei a pagina e acrescentei seu nome ,Alexandre Vieira , posso usa-lo em meu site? Alguém já o usa?
Para adicionar um comentário você deve efetuar o login


Gostou do CódigoFonte.net? Quer indicar a um amigo?
Preencha os campos a seguir.
Seu Nome:
Seu E-mail:
E-mail de seu Amigo:


CodigoFonte.net » Meu Mural » Competiva - Criação de Sites » Todos os Direitos Reservados © 2002/2010