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
Enviar um Comentário