Busca com Ajax do jQuery e PHP

Dicas JQUERY

Aumentar texto
A-A+

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.

Arquivo HTML form.html

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>

Arquivo PHP busca.php

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