jQuery - Método AJAX load()

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

Método load() do jQuery

jQuery load()O método carrega dados do servidor e coloca o HTML retornado no elemento selecionado.

Este método oferece uma maneira simples de carregar dados do servidor de forma assíncrona.

Este éload()Sintaxe do método:

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

Parâmetros:

• URL-Especificar o URL que você deseja solicitar

• data -(Opcional) Especificar um objeto puro ou uma string que será enviada ao servidor juntamente com a solicitação

• callback-(Opcional) Especificar a função de chamada de volta a ser executada após a conclusão do método load()

O seguinte exemplo carrega o conteúdo do arquivo ajax_intro.txt no elemento DIV:

$("button").click(function(){
　　$("div").load("ajax_intro.txt");
});

O seguinte exemplo carrega a página ajax_post.html e envia algumas outrasDADOS:

$("button").click(function(){
　　let data = {fname:"Seagull", lname:"Anna"};
　　$("div").load("ajax_post.php", data);
});

Este é o aspecto do arquivo PHP ("ajax_post.html"):

<?php
　　　　echo "<p>Hello ".$_POST[39;fname#39;]." ".$_POST[39;lname#39;]."How are u doing?</p>";
?>

Método de solicitação:Se forDADOSSe fornecido como objeto, usa o método POST. Caso contrário, é假定GET.

Usar chamada de volta para carregar a página

OpcionalcallbackParâmetro especificadoload()Função de chamada de volta a ser executada após a conclusão do método.

A função de chamada de volta pode ter diferentes parâmetros:

• response　 -Contém os dados do resultado da solicitação

• status -Contém o estado da solicitação ("success", "notmodified", "error", "timeout", ou "parsererror")

• xhr-Contém o objeto XMLHttpRequest

O seguinte exemplo carrega a página ajax_post.html e envia algumas outras mensagens de estado e dados:

$("button").click(function(){
　　let data = {fname:"Seagull", lname:"Anna"};
　　$("div").load("ajax_post.php", data, function(response, status){
　　　　alert(status);
　　});
});

A seguinte exemplo exibe uma notificação quando ocorre um erro na solicitação Ajax:

$("button").click(function(){
　　let data = {fname:"Seagull", lname:"Anna"};
　　$("#success").load("wrong_file.php", data, function(response, status, xhr){
　　　　if(status == "error"){
　　　　　　let msg = "Sorry but there was an error: ";
　　　　　　$("#error").html(msg　+　xhr.status　+　"　"　+　xhr.statusText);
　　　　}
　　});
});

Carregar Fragmento da Página

jQuery load()O método também nos permite obter apenas uma parte do documento.

Isso pode ser feito simplesmente adicionando um espaço e o seletor jQuery ao parâmetro URL.

O seguinte exemplo carregará o conteúdo do elemento com ID "table" do arquivo "ajax_load.html" para o elemento DIV:

$("button").click(function(){
　　$("div").load("ajax_load.html　#table");
});

Referência do jQuery AJAX

Para referência completa dos métodos AJAX, acesse nossoReferência do jQuery AJAX.