Busca simples em Ajax

fox_hound · Julho 15, 2008

Bem pessoal, criei um topico a um tempo atras, mas acho q pela dimensão do mesmo não foi muito aproveitado, é sobre um exemplo de paginação com Ajax http://forum.imasters.com.br/index.php?showtopic=290538

Sendo assim, resolvi criar um tutorial sobre uma busca simples em Ajax

você vai precisar ter um minimo de conhecimento em Javascript, Sql(banco de dados) e claro PHP

Vamos lá

1º Passo - criando a tabela do banco de dados, já com dados inseridos para o teste

CREATE TABLE `clientes` (
 `id` int(11) NOT NULL auto_increment,
 `nome` varchar(60) default NULL,
 `sobrenome` varchar(60) default NULL,
 `fone` varchar(10) default NULL,
 PRIMARY KEY  (`id`)
) ENGINE=MyISAM;

insert  into `clientes`(`id`,`nome`,`sobrenome`,`fone`) values (1,'joão','sousa','1111111111');
insert  into `clientes`(`id`,`nome`,`sobrenome`,`fone`) values (2,'maria','silva','2222222222');
insert  into `clientes`(`id`,`nome`,`sobrenome`,`fone`) values (3,'francisco','assis','3333333333');
insert  into `clientes`(`id`,`nome`,`sobrenome`,`fone`) values (4,'josé','ribeiro','4444444444');
insert  into `clientes`(`id`,`nome`,`sobrenome`,`fone`) values (5,'raimundo','soares','5555555555');
insert  into `clientes`(`id`,`nome`,`sobrenome`,`fone`) values (6,'marta','sá','6666666666');
insert  into `clientes`(`id`,`nome`,`sobrenome`,`fone`) values (7,'regina','carvalho','7777777777');
insert  into `clientes`(`id`,`nome`,`sobrenome`,`fone`) values (8,'alberto','duarte','8888888888');
insert  into `clientes`(`id`,`nome`,`sobrenome`,`fone`) values (9,'joana','souza','9999999999');
insert  into `clientes`(`id`,`nome`,`sobrenome`,`fone`) values (10,'marina','diniz','1234567891');
insert  into `clientes`(`id`,`nome`,`sobrenome`,`fone`) values (11,'miguel','alves','9876543219');
insert  into `clientes`(`id`,`nome`,`sobrenome`,`fone`) values (12,'joaquim','ferreira','1122334455');
insert  into `clientes`(`id`,`nome`,`sobrenome`,`fone`) values (13,'carlos','jr','9988774455');
insert  into `clientes`(`id`,`nome`,`sobrenome`,`fone`) values (14,'danilo','almeida','4567891235');

2º Passo - seu arquivo de configuração de banco de dados, chamei de banco.php

<?php
$servidor	=   "seu servidor";	 //SERVIDOR ONDE ESTÁ LOCALIZADO O BANCO DE DADOS
$bd		   =   "seu banco";		   //NOME DO BANCO DE DADOS
$usuario	 =   "seu usuario";		 //USUÁRIO PARA TER ACESSO AO MYSQL
$senha		 =   "sua senha";		//SENHA DE ACESSO AO MYSQL

//CONECTANDO AO BANCO
$conn	=   @mysql_connect($servidor, $usuario, $senha) 
			 or die("ERRO NA CONEXÃO, INFORME AO ADMINISTRADOR<br>Verifique:<br>Endereço do Servidor<br>Usuario do banco<br>Senha do banco<br><br>Arquivo: banco.php");

//SELECIONA O BANCO DE DADOS A SER UTILIZADO
$db	  =   @mysql_select_db($bd, $conn)
			 or die("ERRO NA SELEÇÃO DO BANCO DE DADOS, INFORME AO ADMINISTRADOR<br>Verifique:<br>O nome do Banco<br><br>Arquivo: banco.php");
?>

3º Passo - O código javascript que executa o ajax, atraves do objeto XmlHttpRequest (deem uma estudade sobre ele) , chamei script.js

function ajax(url)
{

req = null;

if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
req.onreadystatechange = processReqChange;
req.open("GET",url,true);
req.send(null);

} else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
if (req) {

req.onreadystatechange = processReqChange;
req.open("GET",url,true);

req.send();
}
}
}

function processReqChange()
{
if (req.readyState == 1) {
document.getElementById('pagina').innerHTML = 'Carregando,Aguarde...';
}


else if (req.readyState == 4) {


if (req.status ==200) {

document.getElementById('pagina').innerHTML = req.responseText;

} else {
alert("Houve um problema ao obter os dados:n" + req.statusText);
}
}
}

4º Passo - Nosso cliente.php

<?php
require("banco.php");
?>
<script src="script.js"></script>
<script>
	function pesquisa(valor)
	{
		url="buscar_cliente.php?valor="+valor;
		ajax(url);
	}
</script>
<?php
if ($_GET[codigo]){
	$sql = "select id,nome,sobrenome,fone from clientes where id='$_GET[codigo]'";
	$sql_result = mysql_query($sql);
	$l = mysql_fetch_array($sql_result);
	$id			= $l[0];
	$nome		= $l[1];	
	$sobrenome	= $l[2];
	$fone		= $l[3];
	
	echo "
	Id: <strong>$id</strong> <br>
	Nome: <strong>$nome</strong> <br>
	Sobrenome: <strong>$sobrenome</strong> <br>
	Fone: <strong>$fone</strong> <br>
	<a href=\"cliente.php\">voltar</a>
	";

}
else{
	echo "
	<form name=\"form1\">		   
	<b>Descrição</b><br/>
	<input type=\"text\" size=\"47\" name=\"nome\" id=\"nome\" onKeyUp=\"pesquisa(this.value)\">
	<br/>
	</form>
	<div id=\"pagina\"></div>";

}

5º Passo - o arquivo que fará a busca, atraves da url passada pelo GET do script.js, chamo buscar_cliente.php

<?php
header("Content-Type: text/html; charset=ISO-8859-1",true);
require("banco.php");
if(!empty($_GET["valor"]))
{
$sql			= "select id,nome from clientes where nome like '$_GET[valor]%' order by nome";
$resultado		= mysql_query($sql) or die ("Houve erro!! Digite corretamente sua busca!");
$linhas			= mysql_num_rows($resultado);
if($linhas>0){
echo "<table border=\"0\" cellpadding=\"3\" cellspacing=\"3\"  width=\"15%\">";
echo "<tr bgcolor=\"#DDDDDD\"><th>Nome</th></tr>\n";
while ($l = mysql_fetch_array($resultado)) {
		$codigo		= $l[0];
		$nome		= $l[1];
			
		echo "<tr bgcolor=\"#AADDFF\"><td><a href=\"cliente.php?codigo=".$codigo."\">".stripslashes($nome)."</a></td></tr>";
	}

}
else{
		echo "<tr bgcolor=\"#AADDFF\"><td>Consulta vazia, por favor tente outra vez!!</td></tr>";	
		}

}
?>

aqui vcs podem ver funcionando: http://cgsoftweb.com/teste/busca/cliente.php

Bem, espero q aproveitem http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

abraços

Alaerte Gabriel · Julho 15, 2008

Boa.

cassiano óliver · Julho 15, 2008

boa iniciativa..

vai ajudar bastante gente...

hygorsandro · Julho 15, 2008

dica:

ai so busca exemplo o nome francisco , mas se você começar digitar pelo sobrenome: assis, ou pelo telefone 3333-3333 nao é achado..

alguem da dicas ai, de como colocar pra buscar em todos registros..

e como fica colocando?

\sobrenome\ \fone\

fox_hound · Julho 19, 2008

dica:

ai so busca exemplo o nome francisco , mas se você começar digitar pelo sobrenome: assis, ou pelo telefone 3333-3333 nao é achado..

alguem da dicas ai, de como colocar pra buscar em todos registros..

<input type=\"text\" size=\"47\" name=\"nome\" id=\"nome\" onKeyUp=\"pesquisa(this.value)\">

e como fica colocando?

\sobrenome\ \fone\

você só precisa mudar na consulta do mysql kra, nesse trecho:

$sql			= "select id,nome from clientes where nome like '$_GET[valor]%' order by nome";

você o altera e deixe assim:

$sql			= "select id,nome from clientes where nome like '$_GET[valor]%' or sobrenome like '$_GET[valor]%' or fone like '$_GET[valor]%' order by nome";

beleza??

hygorsandro · Julho 22, 2008

beleza cara...

otimo script esse seu

INDICO A TODOS \o

hgb7 · Julho 22, 2008

Pow, função legal, to usando ^^

fox_hound · Julho 24, 2008

beleza cara...

otimo script esse seu

INDICO A TODOS \o

Pow, função legal, to usando ^^

valeu galera, q bom q estão aproveitando http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Williams Duarte · Dezembro 14, 2008

Muito bom mesmo este script vou usar http://forum.imasters.com.br/public/style_emoticons/default/natal_wink.gif

Arquivado

Busca simples em Ajax

Recommended Posts

fox_hound 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Alaerte Gabriel 662

Compartilhar este post

Link para o post

Compartilhar em outros sites

cassiano óliver 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

hygorsandro 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

fox_hound 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

hygorsandro 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

hgb7 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

fox_hound 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Williams Duarte 431

Compartilhar este post

Link para o post

Compartilhar em outros sites

PHP+Codeigniter - Dúvida em Relação a Teclas

Conexão mysql com outro domínio

[Resolvido] JavaScript - Exibir logo dentro da Tabela html

Fóruns

Tempo Real

Informação importante