Image Image Image Image Image
Scroll to Top

Topo

13

nov
2011

Sem Comentários

Em Blog

Por Allison

Usando Ajax com jQuery

Em 13, nov 2011 | Sem Comentários | Em Blog | Por Allison

Realmente eu achava chato programar em javascript, algo complicado, cheio de lerolero, mas então eu encontrei o jQuery, e programar em javascript se tornou algo fácil e muito divertido. Realmente eu fiquei muito feliz a descobrir este framework (se é que pode ser chamado assim). Hoje vou falar de uma das funcionalidades mais uteis e mais requisitadas que podemos usar para sistemas web, o ajax.

Tirando da Wikipedia: AJAX (acrônimo em língua inglesa de Asynchronous Javascript And XML) é o uso metodológico de tecnologias como Javascript e XML, providas por navegadores, para tornar páginas Web mais interativas com o usuário, utilizando-se de solicitações assíncronas de informações. Mas na linguagem mais simples, conseguimos fazer uma requisição a um arquivo (pagina) sem precisar fazer reload de tela. Sim, isto torna muito mais rápido a execução do seu código, e muito mais bonito e elegante tbm.

Uma coisa que vamos aprender como jQuery é que vamos separar totalmente o nosso código javascript do nosso html. Gosto de pensar a programação web em camadas, sendo elas: conteúdo (html), estilo (css) e ação (javascript). Ainda temos a tomada de decisão (php), mas acho que falar sobre isto é coisa para outro tutorial. Vamos ao que interessa.

Primeiro, precisamos baixar o jQuery direto da fonte: http://docs.jquery.com/Downloading_jQuery

Vamos entender como funciona a estrutura básica:

<!doctype html>
<html>
  <head>
    <!-- aqui vamos fazer o nosso include da biblioteca do jQuery -->
    <script type="text/javascript" src="jquery.js"></script>
 
    <script type="text/javascript">
      <!-- aqui vamos escrever nosso código javascript -->
    </script>
  </head>
  <body>
    <a href="http://jquery.com/">jQuery</a>
  </body>
</html>

Muito simples, fizemos a requisição do nosso arquivo jQuery, e logo em seguida escrevemos nosso código entre as tags .

Mas vamos agora ao nosso código:

<!doctype html>
<html>
  <head>
 
    <script type="text/javascript" src="jquery.js"></script>
 
    <script type="text/javascript">
    $(document).ready(function(){
      $("#button_busca").click(function () {
        $("form").submit(function () { return false; });
        var busca = $("#busca").val();
        $.ajax({
            type: "POST",
            url: "busca.php",
            data: "busca="+busca,
            success: function(html){
                $("#resposta").html(html);
            }
        });
    });
    });
    </script>
  </head>
  <body>
    <div id="resposta"> </div>
    <form>
    <fieldset>
        <legend>Busca</legend>
        <dl>
            <dt><label for="busca">Palavra Chave:</label></dt>
            <dd><input type="text" name="busca" id="busca" /></dd>
        <dd class="botao"><button id="button_busca">Busca</button></textarea></dd>
            </dl>
    </fieldset>
    </form>
  </body>
</html>

Primeiro fazemos o include da biblioteca jQuery. Depois temos a linha: “$(document).ready(function(){” isto faz com que assim que a pagina termine de ser carregada ele aplique as rotinas que vamos escrever abaixo dele. Abaixo temos “$(“#button_busca”).click(function () {” que vai associar ao id button_busca uma ação quando ele for clicado.

Usamos a função “$(“form”).submit(function () { return false; });” para que quando o botão for clicado ele não faça um reload de tela enviando para a action do form.

Criamos uma variável e atribuímos a ela o valor que estiver no campo de input com o id busca (“var busca = $(“#busca”).val();”).

A nossa chamada ajax ocorre na linha 13, onde chamamos a função e passamos os parâmetros:

  • type: tipo de encoding que vai ser enviado para o arquivo.
  • url: caminho completo do arquivo que vai ser requisitado.
  • data: os valores que serão passados, no nosso exemplo estão passando a variável busca, com o valor que pegamos do input com o id busca.
  • success: dizemos que caso tudo funcione ok, execute isto, no nosso caso estamos pegando o retorno da requisição e jogando o mesmo como html na div de id resposta.

Segue ainda o código php:

<?php
       echo "Resultado da Consulta aqui: $_POST[busca]";
?>

Fonte: Rafael Cirolini/NerdHead

Redes Sociais

Tags | , , , , , ,

Enviar um Comentário