E ai pessoal! Vou ensinar como fazer uma busca dinâmica interagindo AJAX, PHP e MySQL.
Bom, vamos lá:
1º passo: Antes de iniciarmos, é preciso criar a tabela "cliente" no nosso banco de dados "teste". A tabela conterá os campos: id, nome, cidade, uf. O campo id será inteiro e também nossa chave primária, os campos nome (por onde efetuaremos a consulta) e cidade serão varchar(50) e o campo uf será char(2) e conterá a sigla do estado.
CREATE TABLE cliente (
id int(6) unsigned NOT NULL default '0',
nome varchar(50) NOT NULL default '',
cidade varchar(50) NOT NULL default '',
uf char(2) NOT NULL default '',
PRIMARY KEY (id)
);
2º passo: Será a criação da página "index.html", que conterá o campo de busca e a chamada para a função ajax.
<html>
<head>
<title>Busca Dinamica</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script src="script.js"></script>
</head>
<body>
<table width="657" border="0" bgcolor="#f7f7f7">
<tr>
<td align="center" bgcolor="#CCCCCC"><strong><font color="#FF0000" size="1" face="Verdana, Arial, Helvetica, sans-serif"><- Busca Dinamica -></font></strong></td>
</tr>
<tr>
<td><font size="1" face="Verdana, Arial, Helvetica, sans-serif"><strong>Digite aki o nome do cliente</strong></font>:
<!-- NOTE Q A CADA TECLA PRESSIONADA É CHAMADA A FUNÇÃO PESQUISA PASSANDO O QUE O USUARIO TEM DIGITADO ATÉ O MOMENTO -->
<input type="text" name="nome" onKeyUp="carregaAjax('pagina', 'busca_nome.php?valor=' + this.value)" onKeyDown="carregaAjax('pagina', 'busca_nome.php?valor=' + this.value)"></td>
</tr>
<tr>
<td>
<!-- AQUI SERÁ APRESENTADO O RESULTADO DA BUSCA DINÂMICA.. OU SEJA OS NOMES -->
<div id="pagina"></div></td>
</tr>
</table>
</body>
</html>
3º passo: Vamos agora construir o nosso arquivo "busca_nome.php" que conectará no banco e efetuará uma busca simples usando SQL.
<?php
if(!empty($_GET["valor"])){
// O campo valor conterá o que o usuário digitou até o momento
//Conecta ao banco, colocar parametros ip, usuario, senha
$conexao=mysql_connect("localhost","root","root");
//Seleciona o banco de dados que vai usar
mysql_select_db("teste");
// Executa a instrução SELECT passando o que o usuário digitou
$sql="select * from cliente where nome like '$_GET[valor]%'";
$resultado=mysql_query($sql) or die (mysql_error());
//Verifica a quantidade de registros retornados
$linhas=mysql_num_rows($resultado);
if($linhas>0){
// Executa um LOOP para mostrar os nomes das pessoas
// Vale lembrar que todos esses resultados serao mostrados dentro da pagina index.html dentro da DIV pagina
while($pegar=mysql_fetch_array($resultado))
echo "$pegar[nome] <br />";
}
}
?>
4º passo: A construção do nosso "script.js" que conterá as funções da metodologia AJAX.
function openAjax() {
var Ajax;
try {Ajax = new XMLHttpRequest(); // XMLHttpRequest para browsers mais populares, como: Firefox, Safari, dentre outros.
}catch(ee){
try {Ajax = new ActiveXObject("Msxml2.XMLHTTP"); // Para o IE da MS
}catch(e){
try {Ajax = new ActiveXObject("Microsoft.XMLHTTP"); // Para o IE da MS
}catch(e){Ajax = false;}
}
}
return Ajax;
}
function carregaAjax(div, getURL) {
document.getElementById(div).style.display = "block";
if(document.getElementById) { // Para os browsers complacentes com o DOM W3C.
var exibeResultado = document.getElementById(div); // div que exibirá o resultado.
var Ajax = openAjax(); // Inicia o Ajax.
Ajax.open("GET", getURL, true); // fazendo a requisição
Ajax.onreadystatechange = function(){
if(Ajax.readyState == 1) { // Quando estiver carregando, exibe: carregando...
exibeResultado.innerHTML = "<div>Carregando</div>";
}
if(Ajax.readyState == 4) { // Quando estiver tudo pronto.
if(Ajax.status == 200) {
var resultado = Ajax.responseText; // Coloca o retornado pelo Ajax nessa variável
resultado = resultado.replace(/\+/g,""); // Resolve o problema dos acentos (saiba mais aqui: http://www.plugsites.net/leandro/?p=4)
//resultado = resultado.replace(/ã/g,"a");
resultado = unescape(resultado); // Resolve o problema dos acentos
exibeResultado.innerHTML = resultado;
} else {
exibeResultado.innerHTML = "Por favor, tente novamente!";
}
}
}
Ajax.send(null); // submete
}
}
Veja alguns exemplos nos sites a seguir:
www.aramacan.com.br
www.smt.saobernardo.sp.gov.br
Blz léo...
ResponderExcluirpow muito legal o script cara. porém..
aki ñ tá funcionando..
É sem o botão de procurar do form mesmo?
Nã estou conseguindo acionar a busca..
e ae carinha
ResponderExcluiré sem o botão mesmo, o grande lance desse script é funcionar sem o botão, o ajax é acionado com o digitar do usuario, pelo onKeyUp e onKeyDown do input que tem a função que chama o script ajax...entendeu???
qq duvida entra em contato
abraços
Amigo, obrigado.
ResponderExcluirEstava pensando em usar um FrameWork pra Ajax+PHP, porém parece que não será necessário.
Pra que não conseguiu: a aplicação está rodando dentro do APACHE+PHP+MySQL?
A busca não está funcionando por causa do ")" que está faltando depois de "this.value". Assim que coloquei o parenteses começou a rolar pra mim, veja:
ResponderExcluirwww.licencomp.com/busca_dinamica_com_ajax/
Excelente código, falow!!!!
É verdade meu filho...muito obrigado...está corrigido =P
ResponderExcluirabs
segui o tutorial e deu certo, show de boa esta dica.
ResponderExcluirMuito bom o código, mas como faço para colocar em um botão ?????
ResponderExcluirFicou bacana, mas tenho uma duvida, se eu colocar mais div's, como ele saberá qual div deve ser preenchida ??????
ResponderExcluirCOmo imprimir dentro do input o valor do resultado?
ResponderExcluirE para mostrar todos os campos na div. como seria?
ResponderExcluirFino, excelente código
ResponderExcluirFino, excelente código!!
ResponderExcluirFino, excelente código
ResponderExcluir