PHP+JQuery = Ajax mais fácil
Olá, amigos! Esse é mais um artigo que escrevo sobre PHPAjax e desta vez usando a biblioteca JQuery (http://jquery.com/). Com o uso desta lib, a utilização do ajax se torna muito mais fácil e melhor organizada, pois temos uma separação do código htmlPHP do código javascript, assim como fazemos atualmente com o XHtmlCSS.
Para iniciar, você precisa baixar a lib no site do JQuery, o endereço é http://jquery.com. Baixe a versão mais recente e renomeie para jquery.js. Feito isso, vamos iniciar os trabalhos.
Antes de qualquer coisa, criemos a tabela, crie seu banco e execute a seguinte query deste link .
Depois o nosso arquivo de configuração do banco, chamo banco.php:
<?php<br />$servidor = "seu_servidor";<br />$usuario = "seu_usuario";<br />$senha = "sua_senha";<br />$banco = "seu_banco";<br /><br />$conn = mysql_connect($servidor, $usuario, $senha);<br />if ($conn){<br /> $banco = mysql_select_db($banco);<br /> if (!$banco){<br /> echo "Erro no banco";<br /> }<br />}<br />else{<br /> echo "Erro no servidor";<br />}<br />?>Agora vamos para o nosso index.php:
<?php<br />include "banco.php";<br />?><br /><br /><html><br /><head><br /><meta http-equiv="Content-Language" content="pt-br" /><br /><meta name="GENERATOR" content="PHPEclipse 1.0" /><br /><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><br /><title>jQuery</title><br /><script type="text/javascript" src="jquery.js"><br /></script><br /><script type="text/javascript"><br />$('document').ready(function(){<br /> $('#loading').hide();<br /> $('#buscar').click(function(){<br /> $('#buscar').val('');<br /> });<br /> $('#buscar').keyup(function(){<br /> $('#loading').ajaxStart(function(){<br /> $('#alvo').hide();<br /> $('#loading').show(); <br /> });<br /> $('#loading').ajaxStop(function(){<br /> $('#loading').hide(); <br /> });<br /> $.post('busca.php',<br /> {busca: $('#buscar').val()},<br /> function(data){<br /> if ($('#buscar').val()!=''){<br /> $('#alvo').show();<br /> $('#alvo').empty().html(data);<br /> }<br /> else{<br /> $('#alvo').empty();<br /> }<br /> }<br /> );<br /> });<br />});<br /></script><br /></head><br /><body><br /><div id="main"><br /> <div id="busca"><br /> <form><br /> <fieldset><br /> <legend>Busca usando JQuery</legend><br /> <input type="text" id="buscar" value="Digite algum país aqui" size="50" ><br /> <div id="loading"><img src="BarraCarregando.gif"> </div><br /> <div id="alvo"></div><br /> </fieldset><br /> </form><br /> </div> <!-- busca --><br /></div> <!-- main --><br /></body><br /></html>Inicialmente chamamos nosso arquivo de configuração de banco de dados:
include "banco.php";O proximo passo é carregar nossa lib JQuery:
<script type="text/javascript" src="jquery.js"></script>Feito isso, criaremos nossa função para as requisições pelo Ajax:
('document').ready(function(){O trecho acima serve para iniciar tudo o que formos realizar pelo JQuery, ele possui uma sintaxe própria, assim como uma linguagem de programação.
('#loading').hide();Neste trecho, nós “escondemos” o conteúdo da div loading. Logo ao carregar a página ele executa esse trecho de código. Simples, não??
('#buscar').click(function(){<br /> ('#buscar').val('');<br /> });Neste momento estamos usando os famosos “eventos” do javascript, porém com JQuery tudo fica mais simples. Ao clicar no elemento que tem por ID buscar ele limpa o mesmo elemento. Poderia ser substituído por (this).val(”);
('#buscar').keyup(function(){No trecho acima tratamos o evento de digitar, mais especificamente de “soltar” a tecla.
$('#loading').ajaxStart(function(){<br /> $('#alvo').hide();<br /> $('#loading').show(); <br /> });Neste momento, o ajax inicia. Para que o usuário não fique “confuso” escondemos a div alvo, que será o destino da requisição, e mostramos a div loading, que é nosso gif de carregar.
$('#loading').ajaxStop(function(){<br /> $('#loading').hide(); <br /> });Acima, o ajax para e podemos esconder a div loading
$.post('#busca.php',<br /> {busca: $('#buscar').val()},<br /> function(data){<br /> if ($('#buscar').val()!=''){<br /> $('#alvo').show();<br /> $('#alvo').empty().html(data);<br /> }<br /> else{<br /> $('#alvo').empty();<br /> }<br /> }<br /> );Acima requisitamos a pagina busca.php, passamos a variável busca pelo método post, se tiver setada mostramos o alvo, limpamos com o empty() e atribuímos o valor da requisição que vem em data, senão somente limpamos.
Encerra-se a parte do JQuery, agora no nosso arquivo busca.php:
<?php<br />header("Content-Type: text/html; charset=ISO-8859-1",true);<br />include "banco.php";<br />if (isset($_POST['busca'])){<br /> $queryString = $_POST['busca'];<br /> $s = "SELECT nome FROM paises WHERE nome LIKE '$queryString%' LIMIT 10";<br /> $s1 = mysql_query($s);<br /> while ($l = mysql_fetch_array($s1)){<br /> echo "<br /> <p>Nome: <strong>".$l['nome']."</strong>";<br /> }<br /> echo "<p>Total: <strong>".mysql_num_rows(mysql_query($s))."</strong>";<br />}<br />else{<br /> echo 'Erro no envio dos dados';<br />}<br />?>Este é o arquivo que estamos requerendo do servidor pelo ajax. Percebam que a variável deste post foi passada e só precisamos retornar o desejado.
Abraços.
é Técnico em Informática pelo CEFET-PI e estudante de Ciência da Computação da UESPI. Trabalha com desenvolvimento em PHP a mais de 2 anos e também com Ajax, Javascript, CSS, XHTML. Site: www.cgsoftweb.com Blog: www.cgsoftweb.com/blog
