método load() do jQuery ajax
exemplo
use solicitações AJAX para mudar o texto do elemento div:
$("botão").clicar(function(){
$("div").carregar('demo_ajax_load.txt');
});
pode encontrar mais exemplos do TIY na parte inferior da página
definição e uso
carregar() método carrega dados do servidor via solicitação AJAX e coloca os dados retornados no elemento especificado.
Notas:还存在一个名为 carregar do jQuery eventométodo. Qual deve ser chamado, depende dos parâmetros.
sintaxe
carregar(url,data,função(response,status,xhr))
| parâmetros | descrição |
|---|---|
| url | Define qual URL a solicitação deve ser enviada. |
| data | Opcional. Define os dados a serem enviados para o servidor juntamente com a solicitação. |
| function(response, status, xhr) |
Opcional. Define a função a ser executada quando a solicitação for concluída. Parâmetros adicionais:
|
Explicação detalhada
Este método é a maneira mais simples de obter dados do servidor. É quase equivalente a $.get(url, data, success), a diferença é que não é uma função global e possui um callback implícito. Quando detecta uma resposta de sucesso (por exemplo, quando textStatus for "success" ou "notmodified"), .load() define o conteúdo HTML do elemento correspondente como os dados retornados. Isso significa que a maioria dos usos deste método será muito simples:
$("#result").load("ajax/test.html");
Se fornecer uma função de callback, esta função será executada após a execução do pós-processamento:
$("#result").load("ajax/test.html", function() {
alert("Carregamento foi executado.");
});
Nos dois exemplos acima, se o documento atual não contiver o ID "result", o método .load() não será executado.
Se os dados fornecidos forem um objeto, será usado o método POST; caso contrário, será usado o método GET.
Carregar fragmentos de página
A método .load(), diferentemente de $.get(), nos permite especificar uma parte do documento remoto a ser inserida. Isso é implementado por meio de uma sintaxe especial do parâmetro url. Se a string contiver um ou mais espaços, a string imediatamente após o primeiro espaço é o seletor jQuery que determina o conteúdo a ser carregado.
Podemos modificar o exemplo acima para que possamos usar uma parte do documento obtido:
$("#result").load("ajax/test.html #container");
Se executar este método, será retornado o conteúdo de ajax/test.html, mas em seguida, o jQuery analisará o documento retornado para encontrar elementos com o ID do contêiner. Este elemento, juntamente com seu conteúdo, será inserido no elemento com o ID de resultado, e o resto do documento retornado será descartado.
O jQuery usa a propriedade .innerHTML do navegador para analisar o documento retornado e inseri-lo no documento atual. Durante esse processo, o navegador geralmente filtra elementos do documento, como <html>, <title> ou <head>. Como resultado, os elementos retornado por .load() podem não ser exatamente os mesmos que os documentos retornado diretamente pelo navegador.
Notas:Devido aos limites de segurança do navegador, a maioria das solicitações "Ajax" seguem a política de origem; as solicitações não podem recuperar dados de domínios, subdomínios ou protocolos diferentes com sucesso.
Mais exemplos
Exemplo 1
Carregar o conteúdo do arquivo feeds.html:
$("#feeds").load("feeds.html");
Exemplo 2
Semelhante ao exemplo acima, mas enviando parâmetros adicionais em formato POST e exibindo uma mensagem de sucesso:
$("#feeds").load("feeds.php", {limit: 25}, function(){
alert("Os últimos 25 itens no feed foram carregados");
});
Exemplo 3
Carregar a parte de navegação lateral do artigo em uma lista não ordenada:
Código HTML:
<b>Links jQuery:</b> <ul id="links"></ul>
Código jQuery:
$("#links").load("/Main_Page #p-Getting-Started li");
Mais exemplos TIY
- Gerar solicitações AJAX e enviar dados através dessa solicitação
- Como usar o parâmetro data para enviar dados através de solicitações AJAX. (Este exemplo foi explicado no tutorial AJAX.)
- Gerar solicitações AJAX e usar funções de callback
- Como usar o parâmetro function para lidar com os resultados de dados provenientes de solicitações AJAX.
- Gerar solicitações AJAX com erros
- Como usar o parâmetro function para lidar com erros em solicitações AJAX (usando parâmetros do XMLHttpRequest).
