jQuery - Módulo Ajax
Se você não sabe como a jQuery funciona, já falei sobre ela em outros artigos. Não deixe de ler.
Como não poderia deixar de ser, o módulo ajax é extremamente simples e contempla tudo que é necessário para uma requisição assíncrona. Existem diversas funções para fazer o HTTP request, mas a que eu uso normalmente é a $.ajax, que por ser a implementação de mais baixo nível, é a mais flexível.
O melhor modo de mostrá-la é com exemplos:
$.ajax({
type: “POST”,
url: “index.php”,
data: “id=6″,
success: function(msg){
alert( msg );
}
});
Este código faz uma requisição via POST (type) ao arquivo index.php (url), enviando a variável ‘id’ com o valor ‘6′ (data). Ao retornar a página (sucess) é executado um alert. Este é o funcionamento básico do ajax.
O que eu constumo fazer para não ser intrusivo e a página funcionar com ou sem javascript é o seguinte:
1 - Crie o html normalmente.
<a href="index.php&id=6" id="link1">link</a>
2 - Adicione o javascript
$(function () {
$(’#link1′).click( function() {
$.ajax({
type: “POST”,
url: this.href,
data: “ajax=1″,
success: function(msg){
alert( msg );
}
});
});
});
Note que é passado o href do link para a url do ajax e adicionado a variável ajax, que no script em PHP faço os ifs necessários para recarregar a página inteira ou apenas retornar o necessário via ajax.
Lembre-se que o google não lê javascript, portanto faça o site todo em html e depois adicione o javascript. Isso parece difícil no começo, mas depois que pegar o jeito fica muito fácil.
Olá felipe, ótimo post. Fico feliz que use a jquery também, e mais ainda por lançar posts sobre o assunto.
Eu também estou mantendo um blog sobre o assunto, é o http://www.vitorprado.com. Também coloquei no ar como iniciativa comunitária o http://www.jquerybrasil.com que é mais a documentação traduzida. Parabéns e estamos por aqui ok?
abraços…
Valeu Vitor,
Seu blogue também tem dicas valiosas.
Abraços
Seria legal se você fizesse outro post explicando como passar valores de um formulário, complementando este seu exemplo. Fica aí a dica.
Um abraço e parabéns pelo post!
Valeu Alan, quero fazer um artigo ainda, mas aquela velha desculpa: “Falta tempo”!
Mas já está nos planos, mais um pouco e eu publico aqui!
Abraço
Olá Felipe, pelo que vejo você também escreve artigos relacionados a jquery, e o que mais me chamou a atenção foi seu post sobre o módulo ajax.
Estou lançando o http://www.jquerybrasil.com com o intúito de reunir a comunidade brasileira de usuários da jquery.
E com isto também, disponibilizar os melhores artigos sobre a mesma escrita por programadores brasileiros. Logo, venho através deste, te solicitar a permissão para que eu publique com trackback e devidos créditos seu post na comunidade.
Como também, linkar seu blog na galeria de programadores que já se converteram a jquery.
Claro que pode!
Acho que seria interessante você instalar um forum lá! Não sei de nenhum lugar pra trocarmos idéias sobre a jquery.
Sucesso!
Olá Felipe!
Estou estudando o JQuery e tenho várias dúvidas.
Eu consigo passar parâmetros com os id’s das div’s?
Exemplo:
function linkPag(_divcont,_pag,_divpag){
$(_divcont).click( function() {
$.ajax({
url: _pag,
cache: false,
success: function(html){
$(_divpag).html(html);
}
});
});
}
Parabéns pelo post!
Nunca usei desse jeito, mas acredito que não tenha problemas. Porém isso me parece um pouco estranho…
gostei do blog, estou começando agora com jquery
com um livro ótimo, mas estou estudando mesmo o básico do javascript puro mesmo, e seu artigo teve uma ótima didática, parabens.