Neste exemplo de busca vamos utilizar a biblioteca jQuery que tem um conjunto completo de recursos de AJAX. As funções e métodos nele nos permitem carregar os dados do servidor sem uma atualização de página do navegador.
No arquivo HTML não foi criado um formulário, usamos um button, onde contém o código jQuery onde foi usado o método POST e o retorno do Ajax é HTML.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Busca simples com jQuery, Ajax e PHP</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#buscaProduto").click(function(){
var nomeProduto = $("#nomeProduto").val();
$.ajax({
url: "busca.php",
dataType: 'html',
data: {produto:nomeProduto},
type: "POST",
beforeSend: function () {
$('#carregando').show();
},
success: function(data){
$('#carregando').hide();
$("#resBusca").html('<b>Resultado da busca</b><br /><br/>'+ data );
},
error: function(data){
$('#carregando').html(data);
}
});
});
});
</script>
</head>
<body>
<b>Digite o que procura</b>
<!--Aqui o formulário para a busca-->
<input type="text" id="nomeProduto" name="produto">
<button type="button" id="buscaProduto">Enviar</button>
<br/><br/>
<!--Fim do formulário busca-->
<br />
<div id="carregando" style="display:none;"><img src="carregandoAjax.gif" /></div>
<!--Aqui é onde vai aparecer o resultado da busca-->
<div id="resBusca"></div>
</body>
</html>
No arquivo PHP temos o código que faz a consulta ao banco de dados criado para usar como exemplo.
<?php
$busca = $_POST['produto'];
//Verifica se variavel busca esta vazia
if($busca == ""){
echo "Digite algum item";
exit;
}
//Aqui faz conexão com banco localmente
$conexao = mysql_connect('localhost', 'root', '') or die ("Erro na conexão ao banco de dados.");
mysql_select_db('produto',$conexao) or die ("Erro ao selecionar a base de dados.");
//Select para fazer a busca
$sql = mysql_query("SELECT * FROM produtos WHERE nome LIKE '".$busca."%'") or die ("Não foi possível realizar a consulta.");
$total_rows = mysql_num_rows($sql);
//Aqui verifica se veio algum resultado
if($total_rows == 0){
echo "Nenhum resultado encontrado";
}
else{
//Loop com resultado do select
while ($result = mysql_fetch_array($sql)) {
echo $result['nome']."<br />";
}
}