Ajax com jQuery – Método load()
Postado por: Pedro Rogério emjQuery oferece bastante funcionalidades Ajax que podem facilitar a tarefa de enviar e fazer requisições asíncronas no servidor. O método mais simples de jQuery para carregar conteúdo através de Ajax é o load(). Esse post tratará de forma simples este comando para mostrar as diferentes formas de uso.
Sintaxe
load(url,parametros,callback)
Inicia uma requisição Ajax a URL solicitada com parâmetros opcionais. Você pode especificar uma opção de callback, que pode ser chamada quando a requisição está completa.
Argumentos
- url: A URL que é solicitada a requisição.
- parâmetros: Um objeto cuja propriedades são serializadas em uma série de parâmetros codificados corretamente e que se passam a requisição. Se utilizado, deve-se especificar se a requisição utiliza o método POST, caso contrário, se omitido, a requisição utiliza o método GET.
- callback: Uma função chamada após a solicitação já ter sido processada.
Vamos ao 1º exemplo:
$("#conteudo").load("arquivo.html");
Carregaria o conteúdo do arquivo.html dentro da div “#conteúdo”. Um exemplo um pouco mais elaborado e completo poderia ser o seguinte:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax com jQuery</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("input[type=button]").click(function(event) {
$("#conteudo").load('arquivo.html',aviso());
});
});
function aviso(){
alert('O conteúdo será carregado agora!');
}
</script>
</head>
<body>
<p><input type="button" value="Carregar conteúdo" /></p>
<div id="conteudo"></div>
</body>
</html>
Como podem ver, sua utilização é muito simples, mas existem alguns macetes. Por exemplo, quando o argumento “parâmetros” é especificado a requisição se faz sob o método HTTP POST, caso contrário, a requisição se faz de modo GET. Se quiser realizar uma requisição GET com os parâmetros, você pode incluí-la na URL. Mas neste caso você deve se assegurar de que a URL está devidamente codificada.
No exemplo seguinte utilizamos o valor do atributo “value” de três botões input para passar a um arquivo .php a ação que desejamos executar. O código que efetuaria a requisição Ajax no arquivo .php seria esse:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax com jQuery</title>
<style type="text/css">
#box {border:1px solid #ccc; padding:5px}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("input[type=button]").click(function(event) {
var acao = $(this).attr("value");
$("#box").load('requisicao.php',{acc:acao});
});
});
</script>
</head>
<body>
<p><input type="button" value="Editar" /></p>
<p><input type="button" value="Novo" /></p>
<p><input type="button" value="Deletar" /></p>
<div id="box"></div>
</body>
</html>
Já o arquivo requisicao.php se encarregaria de veriifcar os parâmetros via POST e retornar as ações pertinentes:
< ?php
if($_POST['acc']=='Editar'){
// Acoes relacionadas a edicao
echo 'A ação selecionada é editar';
}elseif($_POST['acc']=='Novo'){
// Acoes de criacao
echo 'A ação solicitada é criar';
}else{
// Acao para deletar
echo 'A ação solicitada é deletar';
}
?>
Na grande maioria da vezes iremos utilizar o método load() para retornar todo o conteúdo da requisição, mas as vezes pode ocorrer de você querer filtrar essa resposta. jQuery permite a você especificar um seletor na URL para filtrar os elementos que irão ser retornados. Por exemplo:
$('#box').load('meu_arquivo.html #conteudo')
Tudo que estiver dentro da div #conteudo no arquivo meu_arquivo.html será carregado dentro da div #box. O exemplo seguinte se encarrega de carregar todos os links que estão dentro do arquivo links.html:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax com jQuery</title>
<style type="text/css">
#box {border:1px solid #ccc; padding:5px}
a {display:block}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("input[type=button]").click(function(event) {
$("#box").load('links.html a');
});
});
</script>
</head>
<body>
<p><input type="button" value="Carregar conteúdo" /></p>
<div id="box"></div>
</body>
</html>
E o arquivo links.html seria da seguinte forma
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum sed diam nonumy eirmod tempor invidunt ut labor. Stet clita kasd gubergren consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua</p>
<ul>
<li><a href="http://www.pinceladasdaweb.com.br/blog/">Pinceladas da Web</a></li>
<li><a href="http://www.cssnolanche.com.br">CSS no Lanche</a></li>
<li><a href="http://www.cssnolanche.com.br/uploads/html5/">Exemplo de página em HTML5</a></li>
<li><a href="http://twitter.com/pinceladasdaweb">Siga-me no Twitter</a></li>
</ul>
Esse tutorial foi escrito a partir do original: Ajax con jQuery: el método load().
Sobre Pedro Rogério
Pedro Rogério é desenvolvedor web por paixão, não saberia fazer melhor outra coisa. Além de escrever para o Pinceladas da Web também escreve para o CSS no Lanche, blog voltado ao desenvolvimento front-end.
jQuey fede…. tem um post relacionado sobre jQuey vc. Prototype, primeiro que esse tipo de coisa nem se compara, é como comparar uma criança de 2 anos com um adulto de 26, mas digo isso por causa que há algumas desatualizações nos slides.
E outra tudo é uma questão de proposta e approach, com approach eu quero dizer Design Pattern, se você não utiliza, você não tem escalabilidade.
Pronto jQuery fede
“por causa que” é que fede…. hahahahaha… cursinho de português pra ti, amigo.
Esse Hedson não sabe de nada.
Quem disse que idade tem peso nessa “briga infantil”?
E, se tivesse, pior seria para o prototype, que, por ser mais velho, não conta com as mais novas descobertas, artifícios crossbrowser para os novos navegadores, que desenvolvedores aprenderam recentemente.
Nesse site (http://mootools.net/slickspeed/) são feitos testes de performance de DOM. e o Protorype perde com 342 contra 115 do jQuery (quanto menor, melhor) [Ressaltando que, nesse teste, Dojo foi melhor, e a versão do jquery utilizada foi a 1.2.6, hoje com o 1.3.2 e jajá com a 1.4, níveis de performance aumentaram(rão) bastante].
Esta página (http://www.kylehayes.info/2009/03/29/survey-results-javascript-frameworks/) mostra a ascensão do jQuery, frente a outros frameworks em vários requisitos.
O que fede é você, ao dizer o que não sabe. Se achou o código do cara sujo, talvez tenha sido porque você não tenha gostado da forma que ele redige código, ou porque ele assim o fez apenas a nível didático.
Trabalho dando manutenção em, sistemas antigos que utilizam seu prototype e, sinceramente, se jQuery fede, deve ser porque ele apertou a mão do prototype… (e o que escalabilidade tem com isso?)
A abreviação de versus é “vs” e não “vc”, seu burro. E “por causa que” tbm não existe. E quanto ao conteúdo do teu comentário, tu só falou merda.
JQuery é excelente assim como MooTools, embora propostas um pouco diferente, agora, o fato de não saber trabalhar corretamente com a biblioteca não é desculpa para dizer que é ruim, ela é sem duvida a melhor e mais usada no mundo. Comparar com prototype, se é que ele ainda existe, é até uma apelação com o coitado..rs..
Fala merda não fio
É possivel utilizar isso mais uma coisa que me veio a cabeça ??
Seria assim,
Quando um arquivo for chamado ele fazer com que uma div apareça, no caso uma div de loading, isso enquanto o arquivo ainda estiver sendo carregado, e quando o arquivo terminar de ser carregado a div sumir ??
tentei onComplete e tal mas não consegui arrumar uma solução para esse meu problema
Tem sim, tente:
$(document).ready(function() {
$(‘#div-loading’).show();
$(“input[type=button]“).click(function(event) {
$(“#box”).load(‘links.html a’, function(){
$(‘#div-loading’).hide();
});
});
});
Melhor forma de se fazer isso na minha opinião.
#loading é a div com um gif, que indica que a div #conteudo está carregando. #conteudo é a div onde, como o nome diz, irá exibir o conteúdo.
$(‘#conteudo’).ajaxStart( function(){
$(‘#conteudo’).fadeOut(‘fast’);
$(‘#loading’).fadeIn(‘fast’);
})
$(‘#conteudo’).ajaxStop( function(){
$(‘#conteudo’).fadeIn(‘fast’);
$(‘#loading’).fadeOut(‘fast’);
})
Coloque esse código no logo após $(document).ready para que ele fique disponível assim que a página carregar.
Espero que seja útil.
@Ronnie,
Para esse tipo de coisa utilize ajaxStart e ajaxStop:
http://webexpose.org/2007/01/31/b2b-ajax-in-jquery-with-special-effects/
Edson,
Tu vem querer falar difícil mas nem o português você acerta? Estou pouco ligando para quem é mais velho, cada um usa o que quer e pela boa política de grupo, respeita as escolhas dos outros. Primeiro, vá e aprenda um pouco de português.
Minha opnião pessoal, se uma pessoa não sabe falar, como pode ela programar?
Pedro,
Você não tem noção o quanto o seu post me ajudou.
Abraço,
bom dia,
Primeiramente gostaria de parabenizar pelo post, são iniciativas assim que amadurecem tecnologias e programadores, mas vamos ao que interessa, a dúvida:
Estou iniciando em jquery e travei num problema: como executar o load para um link externo? Pelo que percebi, ele funciona excepcionalmente bem, mas somente, para arquivos do mesmo projeto.
Achei a resposta: Criar um script em PHP, ou ASP, ou alguma outra executada no servidor, para realizar a leitura do url externo desejado.
PHP:
extract($_POST);
$page= get_url_contents($site2Read);
echo $page;
function get_url_contents($url){
$crl = curl_init();
$timeout = 5;
curl_setopt ($crl, CURLOPT_URL,$url);
curl_setopt ($crl, CURLOPT_RETURNTRANSFER, 1);
curl_setopt ($crl, CURLOPT_CONNECTTIMEOUT, $timeout);
$ret = curl_exec($crl);
curl_close($crl);
return $ret;
}
HTML (script):
$(“#allh2″).load(“/loader.php h2″, {want2Read:”http://www.want2Read.com/”});
obs.:
Renomear /loader.php pelo nome do seu arquivo PHP
Renomear http://www.want2Read.com/ pela url que deseja ler.
Adicione uma ‘div’ com id=”allh2″ na sua página:
Espero ter ajudado.
extraído de: http://www.sitegrind.nl/jquery/jquery-load-function-get-content-from-other-websites/
Muito bom o post
ajudou muito abraços
Quem fala mal de JQuery é recalcado que nunca teve vontade de testar.
Olá Pedro, parabéns pelo seu Site, muito bom mesmo, e em relação aos códigos têm como inserir eles no blog, montei um blog para Imobiliária da uma passadinha lá e gostaria de pôr um Loading… inicial, se puder tirar minha dúvida agradeço.
obrigado pelo post!
Parabéns pelo tutorial Pedro.
Em nossa intranet utilizamos um sistema desenvolvido com base em métodos do excelente jQuery, que apresenta boa performance ao ser parseado pelo browser. Só temos boas recomendações para este framework.
–
Fabio B.
Unihost Brasil
Brother, sei q aqui não é lugar de duvidas e tal..rs, e é muito bom esse tutorial, mas não funciona no IE, o método load() não funciona da uma olhada nisso http://yema.com.br/html/receitas.html – no FF funciona perfeito, mas no IE não..
Provavelmente deve ser por que você tem 2 onloads na página, o primeiro quando inicializa o Ajax e o segundo para o carrossel de imagens. Experimento colocar tudo dentro de um só.
acho q não é não, eu tirei a função do carrosossel, e ainda não funciona… =///
Também estou com o mesmo problema. Em todas as versões da bosta do IE o load() falha.
O erro abaixo ocorre:
Detalhes dos erros da página da Web
Agente de Usuário: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/4.0; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; Tablet PC 2.0; .NET CLR 3.5.30729; .NET CLR 3.0.30729)
Carimbo de data/hora: Thu, 18 Feb 2010 01:02:38 UTC
Mensagem: Erro de sistema: -1072896748.
Linha: 19
Caractere: 23867
Código: 0
URI: jquery.js
Alguem tem alguma solucao para isso???
Encontrei a solução.
Basta na funcao de callback adicionar os argumentos como no exemplo abaixo:
$(‘#div’).load(url, {}, function(responseText, textStatus, XMLHttpRequest) {
alert(‘funcionou!’);
});
;-)
Socorro. Estou preparando um site onde as páginas são carregadas pelo jquey, dentro de uma destas páginas existe uma galeria com lightbox. Gostaria de saber porque o lightbox não funciona quando chamado por páginas já carregadas pelo jquery. Obs: Se eu abri a página que contém o lightbox em separado ela funciona perfeitamente então o problema não é do lightbox. Sou leigo em javascript.
Tem que ativar o lightbox novamente no callback da .load().
Olá Pedro então é possivel colocar um pre-loading em um site HTML, desenvolvi este site http://www.jcimoveisbrasil.com e gostaria de saber se têm como eu colocar este pré-loading para abrir a pagina só quando estiver totalmente carregada por causa dos slydes das fotos que uso em imóveis agradeço a sua atenção cara, abraço…
Jeovane,
Para utilizarum preloading no site semelhante a um desenvolvido em Flash, utilize esse plugin de jQuery:
http://www.gayadesign.com/diy/queryloader-preload-your-website-in-style/
Gostaria de saber a vantagem/desvantagem em utilizar o xml com Ajax, em relação ao seu exemplo, utilizando load.
No meu caso, preencherei uma tabela com dados oriundos do meu postgre, utilizando PHP, e me passaram uma rotina com XML, que comparando com a sua, é muito mais trabalhosa.
Ai galera eu sou novato em ajax e precisava de uma ajuda….
kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk
Eu to fazendo um site em html, mas eu tenho um link em flash e gostaria de chamar as outras pags em ajax, como eu faço pra isso….?
mto bom, me surgiu uma duvida, vou explicar o que eu to fazendo e depois falo o que preciso :
explicando: 1- div menu de produtos (cat : acessorios = sub_cat cintos, bolsas …// vestuario = camisa, vestido, meia …. etc.)
2- div mostra_produto, que contem o titulo do produto, a imagen e o preço..
agora a duvida .. queria saber uma função pra qndo clicar no item do menu, respectivamente um link normal ( não input ) tipo, ao clicar na subcategoria CINTOS, mostra produtos = cintos …
não sei como explicar mais que isso .. rs.. mas acho que vcs entenderão …
Abraços .. to no aguardo e sempre vindo aqui ,, ;)
É possivel executar um javascript (function/jquery) no arquivo que será carregado?
Pois não estou conseguindo executar sequer um alert, no arquivo chamado.
Legal Pedro bacana este efeito tipo slyde, este efeito é possível fazer com que ele quando terminar de correr aquela linha, têm como em vez de abrir as fotos carregar meu site, é possível um pré-loading com estes plugins?
Olá Pedro,
vi seu post e vi que seu exemplo roda no chrome.
tenho o seguinte código:
$(document).ready(function() {
$(“ul#menu li a”).click(function(event) {
$(“#conteudo”).load($(this).attr(“href”));
});
});
e um menu em minha pag html:
pagina a
pagina b
meu problema é o seguinte. se eu não coloco “return false;” depois da função load() , ele redireciona a pagina e se eu coloco, só funciona no firefox , no chrome não da erro mas também não carrega a div.
O ruim disso tudo é que o load não tem a opção de iniciar sozinho e fazer a transição sozinho, tipo um play…
E quando tem, não consigo add botões nele pra ir passando e voltando também =\
eu uso o yahho respostas e lah fica dificil…eles não respondem direito,,,,…vi que aqui eh só pessoas inteligentes…..gostaria de fazer uma pergunta…
eu tenho um site que funciona assim eh uma index..e tem uma div chamada content no meio…ao carregar o site ele coloca nessa div automaticamente o arquivo ou seja ele pega uma pagina home.html e coloca nessa div…..quando se clica no menu perfil….essa pagina home.html some…e pega a a pagina perfil..e coloca no lugar ou seja eh tipo o antigo efeito de frame….mas eh diferente o meu eh querry….bom…o que significa ….ele troca de paginas sem sair da inicial entende..isso economiza carregamento de outros conteudo..fazendo com que meu site carregue rapido..
bom o que eu gostaria de saber….muitas pessoas nao sabem desse efeito de troca…aih eu gostaria de saber um metodo semelhante esse feito aih…
ou tipo o do orkut o gmail sabe;;que ,ostra um progressbar..ou uma imagem load dizendo carregando..bem no topo ou seja ..
ao clicar no link..mostra uma mensagem uma imagem load…ou um progress bar sabe …para que vejam quando o site carrega por completo…eh tipo tambem aquele efeito flash sabe….carregande 39% e tal…..ou ainda melhor aquele efeito lightbox..carregando imagem…em que enquanto ela nao carrega fica lah dizendo carregando…mas eu gostaria que se alguem podesse me dar uma dica de como faezer para o carregamento de minhas paginas externas!!!alguem sabe???
Pedro, parabéns pelo post! Bem detalhadado e explicado!
É Jquery fazendo jus ao sloga: Write less. Do more.
Abraços!
É possível chamar a função através de um link, em vez de ser com um input??
Estive a testar mas não consegui fazer com que um link fizesse o mesmo que o input type button, faz neste exemplo…
This is damn good.