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

93

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.

user760220
źródło

Odpowiedzi:

119

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.

user1721135
źródło
6
Hej stary, właśnie dowiedziałem się, że brakuje spacji po znaku „(dwukropek, prawda?). Ten przykład nie wyszedł z pudełka :-) $ ('# thisdiv'). Load (document.URL + '# thisdiv ');
David Reinberger,
16
Ta metoda ma dużą wadę. Jeśli użyjesz tego i część strony zostanie ponownie załadowana, nie możesz ponownie wykonać tej samej akcji JQuery / Ajax bez przeładowania całej strony w przeglądarce. Po przeładowaniu tą metodą JQuery nie jest inicjalizowana / nie będzie działać ponownie.
Marcel Wasilewski
2
czy na pewno potrzebujemy spacji przed tagiem #? Pracowałem dla mnie, jeśli usunę #tag.
Kurkula
2
@GregHilston tutaj jest mój kod js $ ('# dashboard_main_content'). Load (document.URL + '#dashboard_content'); a oto mój kod HTML <div class = "col-lg-12" id = "dashboard_main_content"> <div id = "dashboard_content"> Treść </div> </div>
Touhami
2
$('#thisdiv').load(document.URL + ' #thisdiv>*')zapobiega posiadaniu innego #thisdivw oryginale#thisdiv
Peter
17

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.

Jonast92
źródło
Twój przykład Ajax, jak sprawić, by aktualizował się na żywo?
TheCrazyProfessor
10

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/

jsalonen
źródło
Fajny przykład i ułatwił sprawę. Czy możemy znaleźć w tym jakieś wady?
Luigi Lopez
3

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

Kamil Kiełczewski
źródło
1

$.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 .

Panie Mak
źródło