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
$servidor = "seu_servidor";
$usuario = "seu_usuario";
$senha = "sua_senha";
$banco = "seu_banco";
$conn = mysql_connect($servidor, $usuario, $senha);
if ($conn){
$banco = mysql_select_db($banco);
if (!$banco){
echo "Erro no banco";
}
}
else{
echo "Erro no servidor";
}
?>Agora vamos para o nosso index.php:
<?php
include "banco.php";
?>
<html>
<head>
<meta http-equiv="Content-Language" content="pt-br" />
<meta name="GENERATOR" content="PHPEclipse 1.0" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery</title>
<script type="text/javascript" src="jquery.js">
</script>
<script type="text/javascript">
$('document').ready(function(){
$('#loading').hide();
$('#buscar').click(function(){
$('#buscar').val('');
});
$('#buscar').keyup(function(){
$('#loading').ajaxStart(function(){
$('#alvo').hide();
$('#loading').show();
});
$('#loading').ajaxStop(function(){
$('#loading').hide();
});
$.post('busca.php',
{busca: $('#buscar').val()},
function(data){
if ($('#buscar').val()!=''){
$('#alvo').show();
$('#alvo').empty().html(data);
}
else{
$('#alvo').empty();
}
}
);
});
});
</script>
</head>
<body>
<div id="main">
<div id="busca">
<form>
<fieldset>
<legend>Busca usando JQuery</legend>
<input type="text" id="buscar" value="Digite algum país aqui" size="50" >
<div id="loading"><img src="BarraCarregando.gif"> </div>
<div id="alvo"></div>
</fieldset>
</form>
</div> <!-- busca -->
</div> <!-- main -->
</body>
</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(){
('#buscar').val('');
});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(){
$('#alvo').hide();
$('#loading').show();
});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(){
$('#loading').hide();
});Acima, o ajax para e podemos esconder a div loading
$.post('#busca.php',
{busca: $('#buscar').val()},
function(data){
if ($('#buscar').val()!=''){
$('#alvo').show();
$('#alvo').empty().html(data);
}
else{
$('#alvo').empty();
}
}
);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
header("Content-Type: text/html; charset=ISO-8859-1",true);
include "banco.php";
if (isset($_POST['busca'])){
$queryString = $_POST['busca'];
$s = "SELECT nome FROM paises WHERE nome LIKE '$queryString%' LIMIT 10";
$s1 = mysql_query($s);
while ($l = mysql_fetch_array($s1)){
echo "
<p>Nome: <strong>".$l['nome']."</strong>";
}
echo "<p>Total: <strong>".mysql_num_rows(mysql_query($s))."</strong>";
}
else{
echo 'Erro no envio dos dados';
}
?>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.
De 0 a 10, o quanto você recomendaria este artigo para um amigo?