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 />"; } }