Teil der Seite aktualisieren (div)

Ich habe eine grundlegende HTML-Datei, die an ein Java-Programm angehängt ist. Dieses Java-Programm aktualisiert den Inhalt eines Teils der HTML-Datei, wenn die Seite aktualisiert wird. Ich möchte nach jedem Zeitintervall nur diesen Teil der Seite aktualisieren. Ich kann den Teil, den ich aktualisieren möchte, in ein platzieren div, bin mir aber nicht sicher, wie ich nur den Inhalt von aktualisieren soll div. Jede Hilfe wäre dankbar. Danke dir.

Verwenden Sie dazu Ajax.

Erstellen Sie eine Funktion, die die aktuelle Seite über Ajax abruft, jedoch nicht die gesamte Seite, sondern nur das betreffende Div vom Server. Die Daten werden dann (erneut über jQuery) in dasselbe fragliche Div gestellt und ersetzen alte Inhalte durch neue.

Relevante Funktion:

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

z.B

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

Beachten Sie, dass das Laden automatisch den Inhalt ersetzt. Stellen Sie sicher, dass vor dem ID-Selektor ein Leerzeichen steht.

Nehmen wir an, Sie haben 2 Divs in Ihrer HTML-Datei.

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

Das Java-Programm selbst kann den Inhalt der HTML-Datei nicht aktualisieren, da sich das HTML auf den Client bezieht, während sich Java auf das Back-End bezieht.

Sie können jedoch zwischen dem Server (dem Back-End) und dem Client kommunizieren.

Wir sprechen von AJAX, das Sie mit JavaScript erreichen. Ich empfehle die Verwendung von jQuery, einer gängigen JavaScript-Bibliothek.

Angenommen, Sie möchten die Seite in jedem konstanten Intervall aktualisieren. Anschließend können Sie mit der Intervallfunktion jedes Mal dieselbe Aktion wiederholen.

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

Sie können es auch so machen:

setTimeout(foo, 30000);

Wobei foo eine Funktion ist.

Anstelle der Warnung ("hi") können Sie die AJAX-Anforderung ausführen, die eine Anforderung an den Server sendet und einige Informationen (z. B. den neuen Text) empfängt, die Sie zum Laden in das div verwenden können.

Ein klassischer AJAX sieht so aus:

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

Während das Backend POST-Daten empfangen und ein Datenobjekt mit Informationen zurückgeben kann, z. B. (und sehr bevorzugt) JSON, gibt es viele Tutorials dazu, GSON von Google ist etwas, das ich vor einiger Zeit verwendet, konnte man einen Blick darauf werfen.

Ich bin nicht professionell mit dem Empfang von Java POST und der Rückgabe von JSON dieser Art, daher werde ich Ihnen kein Beispiel dafür geben, aber ich hoffe, dass dies ein anständiger Anfang ist.

Sie müssen dies auf der Clientseite tun, beispielsweise mit jQuery.

Angenommen, Sie möchten HTML mit der ID in div abrufen mydiv:

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

Sie können diesen Teil der Seite mit jQuery wie folgt aktualisieren:

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

Auf der Serverseite müssen Sie den Handler für /api/mydiveingehende Anforderungen implementieren und das HTML-Fragment zurückgeben, das in mydiv enthalten ist.

In dieser Geige, die ich für Sie erstellt habe, finden Sie ein unterhaltsames Beispiel für die Verwendung von jQuery get mit JSON-Antwortdaten: http://jsfiddle.net/t35F9/1/

Verwenden Sie fetchund innerHTML, um div-Inhalte zu laden

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()Funktionen von jQuery senden intern XML HTTPAnfrage. unter diesen load()ist das nur für einen bestimmten gewidmet DOM Element. Siehe jQuery Ajax Doc . Eine detaillierte Qualitätssicherung hierzu finden Sie hier .