Odśwież Część strony (div)

Question

Mam podstawowy plik html, który jest dołączony do programu java. Ten program java aktualizuje zawartość części pliku HTML za każdym razem, gdy strona jest odświeżana. Chcę odświeżyć tylko tę część strony po każdym interwale czasu. Mogę umieścić część, którą chciałbym odświeżyć w div, ale nie jestem pewien, jak odświeżyć tylko zawartość div. Każda pomoc będzie doceniona. Dziękuję Ci.

Answer 1

Użyj Ajax do tego.

Zbuduj funkcję, która pobierze bieżącą stronę przez ajax, ale nie całą stronę, tylko div z serwera. Dane zostaną następnie (ponownie za pośrednictwem jQuery) umieszczone wewnątrz tego samego elementu div i zastąpią starą zawartość nową.

odpowiedniej funkcji:

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

np

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

Uwaga, ładowanie automatycznie zastępuje zawartość. Pamiętaj, aby wstawić spację przed selektorem identyfikatora.

Answer 2

Musisz to zrobić po stronie klienta, na przykład z jQuery.

Powiedzmy chcesz pobrać HTML do div o identyfikatorze mydiv:

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

można zaktualizować tę część strony z jQuery w następujący sposób:

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

na serwerze-stroną trzeba zaimplementować moduł obsługi zgłoszeń przychodzących pod numer /api/mydiv i zwrócić fragment kodu HTML, który przechodzi do mydiv.

Zobacz ten Fiddle zrobiłem dla ciebie na przykład zabawy przy użyciu jQuery uzyskać z danych odpowiedzi JSON: http://jsfiddle.net/t35F9/1/

Answer 3

Załóżmy, że masz 2 elementy div wewnątrz pliku html.

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

Program Java sama nie może zaktualizować zawartość pliku html html, ponieważ wiąże się z klientem, w międzyczasie java jest związane z back-end.

Można jednak komunikować się między serwerem (back-end) a klientem.

To, o czym mówimy, to AJAX, który osiągasz przy pomocy JavaScript, polecam używanie jQuery, która jest zwykłą biblioteką JavaScript.

Załóżmy, że chcesz odświeżyć stronę w każdym stałym przedziale, a następnie możesz użyć funkcji interwału, aby powtórzyć tę samą akcję co x czas.

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

Można również zrobić to w ten sposób:

setTimeout(foo, 30000); 

Whereea foo jest funkcją.

Zamiast alertu ("cześć") można wykonać żądanie AJAX, które wysyła żądanie do serwera i otrzymuje pewne informacje (na przykład nowy tekst), które można wykorzystać do załadowania do elementu div.

Klasycznym AJAX wygląda następująco:

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. 
    } 
}); 

Wherea backend jest w stanie odbierać dane POST'ed i jest w stanie powrócić do obiektu danych informacji, na przykład (i bardzo preferrable) JSON, istnieje jest wiele samouczków z tym, jak to zrobić, GSON z Google jest czymś, czego użyłem jakiś czas temu, możesz go obejrzeć.

Nie jestem profesjonalistą z Java POST Receiving i zwrotem JSON tego typu, więc nie dam ci z tym przykładu, ale mam nadzieję, że to przyzwoity początek.

Answer 4

$.ajax(), $.get(), $.post(), $.load() funkcje jQuery wewnętrznie wysyłają żądanie XML HTTP. wśród tych load() jest przeznaczona tylko dla określonego DOM Element. Zobacz jQuery Ajax Doc. Szczegóły Q.A. na tych są Here.