Início » Forums » jQuery

Ajax com jQuery

user warning: Table 'feijo_probr.semaphore' doesn't exist query: SELECT expire, value FROM semaphore WHERE name = 'locale_cache_pt-br' in /home/feijo/public_html/includes/lock.inc on line 154.
No replies
sab, 12/22/2007 - 22:32
feijo
Joined: 11/21/2007

Transformando um simples form HTML em algo moderno e dinâmico com AJAX.

Examine este código

$(function(){ // 1
  $("form").submit(function(){ // 2
    var value = $(this).find("input[name=test]").val(); // 3
    $.post("/teste/ajax/registro/",{"teste":value},function(){ // 4 
      alert("Mensagem enviada com sucesso!"); // 5
    });
    return false; // 6
  });
});

Notas para cada linha:

1. $(function(){}) é um atalho para $(document).ready(function(){}), isso significa que teu javascript não vai rodar até que todo documento tenha carregado, consulte:

http://docs.jquery.com/Events/ready

2. Atribuimos uma função para executar quando o form é enviado:

$("form") localiza todos os elementos

na página
$("form").submit() atribui a função ao evento submit do form (o que acontece quando clicas no botão submit), veja:

http://docs.jquery.com/Events/submit#fn

3. Quando uma função é relacionada à uma seleção, a palavra-chave "this" é automaticamente associada ao elemento atual, então ao invés de escrever $("form") de novo, podemos apenas referenciar $(this), veja:

...a palavra-chave 'this' aponta para um elemento DOM especifico...

http://docs.jquery.com/Core/each

4. A função $.post tem 3 parâmetros:
a. A URL para o post
b. Variáveis para serem enviadas ao servidor: {"var":"valor"} (Accessivel no PHP usando $_POST['var'])
c. Uma função de retorno (callback) para ser executada quando o AJAX envia com sucesso e recebe uma resposta, veja:

http://docs.jquery.com/Ajax/jQuery.post#urldatacallback

5. A JavaScript popup for succesful completion.

6. retorna falso para prevenir que o form se comporte na sua forma natural, o que nos tiraria da página atual, veja:

http://docs.jquery.com/Events_(Guide)#event.stopPropagation.28__.29

Então, para quem conhece AJAX usando javascript puro, sabe que há muitas outras coisas a serem feitas, o jQuery agiliza uma bararidade, cuidando da parte chata :)

Top