Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

hpt

Alguem ai entende de ajax?

Recommended Posts

Pessoal, preciso fazer uma coisa bem simples em ajax, preciso que no browser, ao digitar o nome de pessoas, vá filtrando conforme as letras digitadas, igual acontece com o site do google,por exemplo, se digitar "A", somente aparecerá uma lista com o nem de pessoas que iniciem com a letra "A", já tenho o código e tenho o banco com o nome das pessoas, só não sei fazer essa ligação do ajax com o banco pra quando for digitado fazer a busca naquela tabela do banco que tem o nome das pessoas, alguém sabe fazer isso?

Vou postar o código html e o código php aqui embaixo pra vocês verem como está.

 

 

html>  
 <head>  
   <script type="text/javascript">  
     function showHint(str) {  
       if(str.length == 0) {  
         document.getElementById("txtHint").innerHTML = "";  
         return;  
       }  
       if(window.XMLHttpRequest) {  
         xmlhttp = new XMLHttpRequest();  
       }  
       else {  
         xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");  
       }  
       xmlhttp.onreadystatechange = function() {  
         if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {  
           document.getElementById("txtHint").innerHTML = xmlhttp.responseText;  
         }  
       }  
       xmlhttp.open("GET","ajax_2.php?q=" + str,true);  
       xmlhttp.send();  
     }  
   </script>  
 </head>  
 <body>  
   <h3>Start typing a name in the input field below:</h3>  
   <form action="">  
     First name: <input type="text" id="txt1" onkeyup="showHint(this.value)" />  
   </form>  
   <p>Suggestions: <span id="txtHint"></span></p>  
 </body>  
</html>  

 

código php:

 

<?php  

   $a[]="Anna";  
   $a[]="Brittany";  
   $a[]="Cinderella";  
   $a[]="Diana";  
   $a[]="Eva";  
   $a[]="Fiona";  
   $a[]="Gunda";  
   $a[]="Hege";  
   $a[]="Inga";  
   $a[]="Johanna";  
   $a[]="Kitty";  
   $a[]="Linda";  
   $a[]="Nina";  
   $a[]="Ophelia";  
   $a[]="Petunia";  
   $a[]="Amanda";  
   $a[]="Raquel";  
   $a[]="Cindy";  
   $a[]="Doris";  
   $a[]="Eve";  
   $a[]="Evita";  
   $a[]="Sunniva";  
   $a[]="Tove";  
   $a[]="Unni";  
   $a[]="Violet";  
   $a[]="Liza";  
   $a[]="Elizabeth";  
   $a[]="Ellen";  
   $a[]="Wenche";  
   $a[]="Vicky";  

   $q = $_GET["q"];  
   if(strlen($q) > 0) {  
       $hint = "";  
       for($i=0; $i < count($a); $i++) {  
           if(strtolower($q) == strtolower(substr($a[$i],0,strlen($q)))) {  
               if($hint == "") {  
                   $hint = $a[$i];  
               }  
               else {  
                   $hint = $hint . " , " . $a[$i];  
               }  
           }  
       }  
   }  
   if($hint == "") {  
       $response = "no suggestion";  
   }  
   else {  
       $response = $hint;  
   }  
   echo $response;  

?>  

 

agora só tenho que fazer a ligação do código php com o banco pra puxar o dados e ler esse código php no código html pra quando for digitado no browser acontecer a filtragem dos nomes como já está acontecendo.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Pessoal, preciso fazer uma coisa bem simples em ajax, preciso que no browser, ao digitar o nome de pessoas, vá filtrando conforme as letras digitadas, igual acontece com o site do google,por exemplo, se digitar "A", somente aparecerá uma lista com o nem de pessoas que iniciem com a letra "A", já tenho o código e tenho o banco com o nome das pessoas, só não sei fazer essa ligação do ajax com o banco pra quando for digitado fazer a busca naquela tabela do banco que tem o nome das pessoas, alguém sabe fazer isso?

Vou postar o código html e o código php aqui embaixo pra vocês verem como está.

 

html>  
 <head>  
   <script type="text/javascript">  
     function showHint(str) {  
       if(str.length == 0) {  
         document.getElementById("txtHint").innerHTML = "";  
         return;  
       }  
       if(window.XMLHttpRequest) {  
         xmlhttp = new XMLHttpRequest();  
       }  
       else {  
         xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");  
       }  
       xmlhttp.onreadystatechange = function() {  
         if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {  
           document.getElementById("txtHint").innerHTML = xmlhttp.responseText;  
         }  
       }  
       xmlhttp.open("GET","ajax_2.php?q=" + str,true);
       xmlhttp.send();  
     }  
   </script>  
 </head>  
 <body>  
   <h3>Start typing a name in the input field below:</h3>  
   <form action="">  
     First name: <input type="text" id="txt1" onkeyup="showHint(this.value)" />  
   </form>  
   <p>Suggestions: <span id="txtHint"></span></p>  
 </body>  
</html>  

 

código php:

 

<?php  

   $a[]="Anna";  
   $a[]="Brittany";  
   $a[]="Cinderella";  
   $a[]="Diana";  
   $a[]="Eva";  
   $a[]="Fiona";  
   $a[]="Gunda";  
   $a[]="Hege";  
   $a[]="Inga";  
   $a[]="Johanna";  
   $a[]="Kitty";  
   $a[]="Linda";  
   $a[]="Nina";  
   $a[]="Ophelia";  
   $a[]="Petunia";  
   $a[]="Amanda";  
   $a[]="Raquel";  
   $a[]="Cindy";  
   $a[]="Doris";  
   $a[]="Eve";  
   $a[]="Evita";  
   $a[]="Sunniva";  
   $a[]="Tove";  
   $a[]="Unni";  
   $a[]="Violet";  
   $a[]="Liza";  
   $a[]="Elizabeth";  
   $a[]="Ellen";  
   $a[]="Wenche";  
   $a[]="Vicky";  

   $q = $_GET["q"];  
   if(strlen($q) > 0) {  
       $hint = "";  
       for($i=0; $i < count($a); $i++) {  
           if(strtolower($q) == strtolower(substr($a[$i],0,strlen($q)))) {  
               if($hint == "") {  
                   $hint = $a[$i];  
               }  
               else {  
                   $hint = $hint . " , " . $a[$i];  
               }  
           }  
       }  
   }  
   if($hint == "") {  
       $response = "no suggestion";  
   }  
   else {  
       $response = $hint;  
   }  
   echo $response;  

?>  

 

agora só tenho que fazer a ligação do código php com o banco pra puxar o dados e ler esse código php no código html pra quando for digitado no browser acontecer a filtragem dos nomes como já está acontecendo.

 

 

Eu já até utilizei ajax por javascript puro, porém não lembro como funciona.

Utilize por JQuery, é melhor e mais fácil

 

Um exemplo dele

 

$.ajax({
 type: "GET",
 url: "paginadeprocesso.php",
 data: "variavel1=valor&variavel2=valor",
 success: function(variavelderetorno) {
    $("#id_de_onde_deve_retornar").html(variavelderetorno);
 },
 error: function() {
    alert("Erro ao carregar o ajax");
 }
});

 

funciona!

porém se você quer eficiência MESMO você pode utilizar o JSON.

É beeem chatin de se entender, porém é melhor.

 

A vantagem é que ele não carrega novamente o layout, a parte do layout você faz no javascript e carrega apenas as informações.

 

Fica bem mais veloz.

 

não cheguei verificar seu código php, mas parece que ele funciona sim.

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.