Atualizar parte da página (div)


92

Eu tenho um arquivo html básico que está anexado a um programa java. Este programa java atualiza o conteúdo de parte do arquivo HTML sempre que a página é atualizada. Desejo atualizar somente aquela parte da página após cada intervalo de tempo. Posso colocar a parte que gostaria de atualizar em a div, mas não tenho certeza de como atualizar apenas o conteúdo de div. Qualquer ajuda seria apreciada. Obrigado.

Respostas:


117

Use Ajax para isso.

Construa uma função que irá buscar a página atual via ajax, mas não a página inteira, apenas a div em questão do servidor. Os dados serão então (novamente via jQuery) colocados dentro do mesmo div em questão e substituirão o conteúdo antigo por um novo.

Função relevante:

http://api.jquery.com/load/

por exemplo

$('#thisdiv').load(document.URL +  ' #thisdiv');

Observe que o carregamento substitui automaticamente o conteúdo. Certifique-se de incluir um espaço antes do seletor de id.


6
Ei cara, acabei de descobrir que falta um espaço após o '(dois pontos à direita?), Este exemplo não funcionou fora da caixa :-) $ (' # thisdiv '). Load (document.URL +' # thisdiv ');
David Reinberger

16
Esse método tem uma grande desvantagem. Se você usar isso e a parte da página recarregar, você não poderá fazer a mesma ação JQuery / Ajax novamente sem recarregar a página inteira no navegador. Após a recarga com este método, o JQuery não é inicializado / não funcionará novamente.
Marcel Wasilewski

2
tem certeza de que precisamos de um espaço antes de # tag? Trabalhei para mim se remover #tag.
Kurkula

2
@GregHilston aqui está meu código js $ ('# dashboard_main_content'). Load (document.URL + '#dashboard_content'); e aqui está meu HTML <div class = "col-lg-12" id = "dashboard_main_content"> <div id = "dashboard_content"> Conteúdo </div> </div>
Touhami

2
$('#thisdiv').load(document.URL + ' #thisdiv>*')evita ter outro #thisdivdentro do original#thisdiv
Pedro

17

Vamos supor que você tenha 2 divs dentro de seu arquivo html.

<div id="div1">some text</div>
<div id="div2">some other text</div>

O próprio programa java não pode atualizar o conteúdo do arquivo html porque o html está relacionado ao cliente, enquanto o java está relacionado ao back-end.

Você pode, entretanto, comunicar-se entre o servidor (back-end) e o cliente.

Estamos falando de AJAX, que você consegue usando JavaScript. Recomendo usar jQuery, que é uma biblioteca JavaScript comum.

Vamos supor que você deseja atualizar a página a cada intervalo constante e, em seguida, pode usar a função de intervalo para repetir a mesma ação a cada x vezes.

setInterval(function()
{
    alert("hi");
}, 30000);

Você também pode fazer assim:

setTimeout(foo, 30000);

Onde foo é uma função.

Em vez do alerta ("oi"), você pode executar a solicitação AJAX, que envia uma solicitação ao servidor e recebe algumas informações (por exemplo, o novo texto) que você pode usar para carregar no div.

Um AJAX clássico se parece com isto:

var fetch = true;
var url = 'someurl.java';
$.ajax(
{
    // Post the variable fetch to url.
    type : 'post',
    url : url,
    dataType : 'json', // expected returned data format.
    data : 
    {
        'fetch' : fetch // You might want to indicate what you're requesting.
    },
    success : function(data)
    {
        // This happens AFTER the backend has returned an JSON array (or other object type)
        var res1, res2;

        for(var i = 0; i < data.length; i++)
        {
            // Parse through the JSON array which was returned.
            // A proper error handling should be added here (check if
            // everything went successful or not)

            res1 = data[i].res1;
            res2 = data[i].res2;

            // Do something with the returned data
            $('#div1').html(res1);
        }
    },
    complete : function(data)
    {
        // do something, not critical.
    }
});

Onde o backend é capaz de receber dados POST'ed e é capaz de retornar um objeto de dados de informação, por exemplo (e muito preferível) JSON, existem muitos tutoriais por aí com como fazer isso, GSON do Google é algo que eu usado há algum tempo, você poderia dar uma olhada nele.

Não sou profissional com o recebimento do Java POST e o retorno de JSON desse tipo, então não vou dar um exemplo com isso, mas espero que seja um bom começo.


Seu exemplo Ajax, como você atualiza ao vivo?
TheCrazyProfessor

10

Você precisa fazer isso no lado do cliente, por exemplo, com jQuery.

Digamos que você queira recuperar HTML em div com ID mydiv:

<h1>My page</h1>
<div id="mydiv">
    <h2>This div is updated</h2>
</div>

Você pode atualizar esta parte da página com jQuery da seguinte maneira:

$.get('/api/mydiv', function(data) {
  $('#mydiv').html(data);
});

No lado do servidor, você precisa implementar o manipulador para solicitações que chegam /api/mydive retornar o fragmento de HTML que vai dentro do mydiv.

Veja este Fiddle que fiz para você como um exemplo divertido usando jQuery get com dados de resposta JSON: http://jsfiddle.net/t35F9/1/


Um exemplo legal e fácil. Podemos encontrar alguma desvantagem nisso?
Luigi Lopez

3

Use fetche innerHTMLpara carregar conteúdo div


1

$.ajax(), $.get(), $.post(), $.load()funções do jQuery enviam XML HTTPsolicitação internamente . entre estes, o load()é dedicado apenas a um determinado DOM Element. Veja jQuery Ajax Doc . Os detalhes do controle de qualidade estão aqui .

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.