Busca com Ajax do jQuery e PHP

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.

";
		
	
		}
	 }