jQuery - Método AJAX load()


Método jQuery load()

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

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

Sintaxe:

$(selector).load(URL,data,callback);

O parâmetro URL obrigatório especifica o URL que você deseja carregar.

O parâmetro de dados opcional especifica um conjunto de pares de chave/valor de string de consulta para enviar junto com a solicitação.

O parâmetro de retorno de chamada opcional é o nome de uma função a ser executada após a conclusão do load()método.

Aqui está o conteúdo do nosso arquivo de exemplo: "demo_test.txt":

<h2>jQuery and AJAX is FUN!!!</h2>
<p id="p1">This is some text in a paragraph.</p>

O exemplo a seguir carrega o conteúdo do arquivo "demo_test.txt" em um <div>elemento específico:

Exemplo

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

Também é possível adicionar um seletor jQuery ao parâmetro URL.

O exemplo a seguir carrega o conteúdo do elemento com id="p1", dentro do arquivo "demo_test.txt", em um <div>elemento específico:

Exemplo

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

O parâmetro de retorno de chamada opcional especifica uma função de retorno de chamada a ser executada quando o load()método for concluído. A função de retorno de chamada pode ter diferentes parâmetros:

  • responseTxt - contém o conteúdo resultante se a chamada for bem-sucedida
  • statusTxt - contém o status da chamada
  • xhr - contém o objeto XMLHttpRequest

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

Exemplo

$("button").click(function(){
  $("#div1").load("demo_test.txt", function(responseTxt, statusTxt, xhr){
    if(statusTxt == "success")
      alert("External content loaded successfully!");
    if(statusTxt == "error")
      alert("Error: " + xhr.status + ": " + xhr.statusText);
  });
});

Referência AJAX do jQuery

Para uma visão geral completa de todos os métodos do jQuery AJAX, acesse nossa Referência do jQuery AJAX .