Método load() do jQuery AJAX

Método load() do jQuery

O método load() do jQuery é um método AJAX simples mas poderoso.

O método load() carrega dados do servidor e coloca os dados retornados no elemento selecionado.

Gramática：

$("}}).load(URL,data,callback);

Obrigatório URL O parâmetro define a URL que você deseja carregar.

Opcional data O parâmetro define a coleção de pares de chave/valor de consulta strings enviados com a solicitação.

Opcional callback O parâmetro é o nome da função a ser executada após a conclusão do método load().

Este é o conteúdo do arquivo de exemplo ("demo_test.txt"):

<h2>jQuery e AJAX é DIVERTIDO!!!</h2>
<p id="p1">Este é algum texto em um parágrafo.</p>

O exemplo a seguir carregará o conteúdo do arquivo "demo_test.txt" para o elemento <div> especificado:

Exemplo

$("#div1").load("demo_test.txt");

Experimente você mesmo

Também é possível adicionar seletores jQuery aos parâmetros da URL.

O exemplo a seguir carrega o conteúdo do elemento com id="p1" do arquivo "demo_test.txt" para o elemento <div> especificado:

Exemplo

$("#div1").load("demo_test.txt #p1");

Experimente você mesmo

O parâmetro opcional callback define a função de callback a ser permitida após a conclusão do método load(). A função de callback pode definir diferentes parâmetros:

  • responseTxt - Contém o conteúdo do resultado da chamada com sucesso
  • statusTXT - Contém o estado da chamada
  • xhr - Contém o objeto XMLHttpRequest

O exemplo a seguir exibe uma caixa de mensagem após a conclusão do método load(). Se o método load() for bem-sucedido, será exibido "Conteúdo externo carregado com sucesso!", e se falhar, será exibida uma mensagem de erro:

Exemplo

$("button").click(function(){
  $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
    if(statusTxt=="success")
      alert("Conteúdo externo carregado com sucesso!");
    if(statusTxt=="error")
      alert("Erro: "+xhr.status+": "+xhr.statusText);
  });
});

Experimente você mesmo

Manual de referência do jQuery AJAX

Para referência completa dos métodos AJAX, acesse nossa Manual de referência do jQuery AJAX.