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

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

Użyj do tego Ajax.

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

Odpowiednia funkcja:

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

na przykład

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

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

Załóżmy, że w pliku HTML znajdują się 2 elementy div.

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

Sam program java nie może zaktualizować zawartości pliku html, ponieważ html jest powiązany z klientem, podczas gdy java jest powiązany z zapleczem.

Możesz jednak komunikować się między serwerem (zapleczem) a klientem.

To o czym mówimy to AJAX, który osiągasz za pomocą JavaScript, polecam używanie jQuery, która jest popularną biblioteką JavaScript.

Załóżmy, że chcesz odświeżać stronę co stały interwał, a następnie możesz użyć funkcji interwału, aby powtarzać tę samą akcję za każdym razem x.

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

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

setTimeout(foo, 30000);

Whereea foo jest funkcją.

Zamiast alertu („cześć”) możesz wykonać żądanie AJAX, które wysyła żądanie do serwera i odbiera pewne informacje (na przykład nowy tekst), których możesz użyć do załadowania do div.

Klasyczny AJAX wygląda tak:

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

Tam, gdzie backend jest w stanie odbierać dane POST i jest w stanie zwrócić obiekt danych informacji, na przykład (i bardzo preferowany) JSON, istnieje wiele samouczków, jak to zrobić, GSON od Google jest czymś, co ja używany jakiś czas temu, możesz się temu przyjrzeć.

Nie jestem profesjonalistą, jeśli chodzi o odbieranie Java POST i zwracanie JSON tego rodzaju, więc nie zamierzam ci tego przykładać, ale mam nadzieję, że to przyzwoity początek.

Musisz to zrobić po stronie klienta, na przykład za pomocą jQuery.

Powiedzmy, że chcesz pobrać kod HTML do div o identyfikatorze mydiv:

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

Możesz zaktualizować tę część strony za pomocą jQuery w następujący sposób:

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

Po stronie serwera musisz zaimplementować obsługę dla żądań przychodzących /api/mydivi zwracających fragment HTML, który trafia do mydiv.

Zobacz to Fiddle, które zrobiłem dla Ciebie, aby uzyskać zabawny przykład z użyciem jQuery get z danymi odpowiedzi JSON: http://jsfiddle.net/t35F9/1/

Użyj fetchi, innerHTMLaby załadować zawartość div

let url="https://server.test-cors.org/server?id=2934825&enable=true&status=200&credentials=false&methods=GET"

async function refresh() {
  btn.disabled = true;
  dynamicPart.innerHTML = "Loading..."
  dynamicPart.innerHTML = await(await fetch(url)).text();
  setTimeout(refresh,2000);
}

<div id="staticPart">Here is static part of page
  <button id="btn" onclick="refresh()">Click here to start refreshing every 2s</button>
</div>

<div id="dynamicPart">Dynamic part</div>

$.ajax(), $.get(), $.post(), $.load()funkcje jQuery wewnętrznie wysyłają XML HTTPżądanie. wśród nich load()jest przeznaczony tylko do konkretnego DOM Element. Zobacz jQuery Ajax Doc . Szczegóły dotyczące kontroli jakości są tutaj .