13.02.2025

Atualizando Conteúdos de div Usando jQuery/Ajax Sem Recarregar

Resposta Rápida

Para atualizar o conteúdo de um div, é recomendável usar o método .load() da biblioteca jQuery. Este método carrega novo código HTML do servidor e o incorpora no elemento especificado. Aqui está um exemplo de código:

$("#divId").load("endpoint.php");

Para atualizações automáticas a cada cinco segundos, você pode usar a função setInterval:

setInterval(() => $('#divId').load('endpoint.php #content'), 5000);

Neste exemplo, o código acima atualiza instantaneamente o elemento com o ID #divId, selecionando apenas a parte #content de endpoint.php. Isso ajuda a reduzir a quantidade de dados transmitidos.

Escolhendo o Elemento Certo

O sucesso da atualização depende da escolha correta do ID do seletor do seu div. Uma escolha errada pode levar a problemas difíceis de diagnosticar:

$("#mydiv").load(location.href + " #mydiv");

É importante evitar aninhar elementos div para prevenir complexidade desnecessária na estrutura:

$("#mydiv").load(location.href + " #myDiv> *", "");

Indicando o Processo ao Usuário

Adicionar um indicador de carregamento deixará claro para o usuário que o processo de atualização ainda está em andamento:

$('#mydiv').html('<div class="loader">Carregando...</div>').load('endpoint.php');

A função de callback no método .load() deve ocultar este indicador assim que o processo de carregamento estiver completo:

$('#mydiv').load('endpoint.php', () => $('.loader').hide());

Usando Ajax para Trabalhar com Formulários

Ao trabalhar com formulários, é recomendável serializar os dados e enviá-los usando uma requisição Ajax POST:

$.ajax({
  type: 'POST',
  url: $('#myForm').attr('action'),
  data: $('#myForm').serialize(),
  success: function(response) {
    $('#myDiv').html(response);
  }
});

Para lidar com o envio do formulário, você pode usar o método .submit().

Visualização

O processo de atualização do div pode ser visualizado da seguinte forma:

🖥️ Página Web
|
|-- 🏞 Conteúdo Antigo (conteúdo original do div)
|
|-- 🔄 jQuery/Ajax   
|
|-- 🖼️ Novo Conteúdo (conteúdo atualizado do div)

Antes da atualização: o conteúdo antigo é definido usando $('#myDiv').html('Conteúdo antigo');.

Depois da atualização: após executar $.load(), o conteúdo do bloco é atualizado:

$('#myDiv').load('/novo-conteudo #target');

Pode-se fazer uma analogia de que nosso div é como um outdoor, onde trocamos os cartazes.

Recursos Avançados do Ajax

Tratamento de Erros do Ajax

O método .fail() é projetado especificamente para o tratamento de erros durante o carregamento:

$('#myDiv').load('endpoint.php').fail(() => {
  alert('Erro ao carregar o conteúdo!');
});

Usando Animações

As animações proporcionarão transições visuais agradáveis entre o conteúdo novo e o antigo. Por exemplo, vamos fazer o elemento div "brincar de esconde-esconde":

$('#myDiv').fadeOut().load('endpoint.php #myDiv', function() {
  $(this).fadeIn();
});

Para melhorar o desempenho, carregue apenas as partes necessárias do conteúdo:

$('#myDiv').load('pagina-atual.html #secaoNecessaria');

Mantendo a Ligação de Eventos

A delegação de eventos é necessária para manter a funcionalidade do conteúdo dinamicamente atualizado:

$(document).on('click', '#myButton', () => {
  $('#myDiv').load('endpoint.php #content');
});

Essa abordagem permite que a funcionalidade dos eventos persista mesmo após a atualização dos elementos.

Recursos Úteis

1. jQuery.ajax() | Documentação da API jQuery — documentação oficial sobre funções AJAX do jQuery.
2. .load() | Documentação da API jQuery — descrição detalhada do método .load().
3. Buscando dados do servidor - Aprenda desenvolvimento web | MDN — informações sobre AJAX e carregamento assíncrono de dados.
4. jQuery.get() | Documentação da API jQuery — usando o método .get() para buscar dados do servidor.
5. jQuery.getJSON() | Documentação da API jQuery — usando .getJSON() para trabalhar com dados JSON.
6. Método jQuery AJAX load() — atualizando conteúdo sem recarregar a página usando o método load().
7. Métodos de requisição HTTP - HTTP | MDN — visão geral detalhada dos principais métodos (GET e POST) para requisições AJAX.

Video

Navigation