Aggiorna parte della pagina (div)

Ho un file html di base allegato a un programma Java. Questo programma java aggiorna il contenuto di una parte del file HTML ogni volta che la pagina viene aggiornata. Voglio aggiornare solo quella parte della pagina dopo ogni intervallo di tempo. Posso inserire la parte che vorrei aggiornare in un div, ma non sono sicuro di come aggiornare solo il contenuto del file div. Qualsiasi aiuto sarebbe apprezzato. Grazie.

Usa Ajax per questo.

Costruisci una funzione che recuperi la pagina corrente tramite ajax, ma non l'intera pagina, solo il div in questione dal server. I dati verranno quindi (sempre tramite jQuery) inseriti nello stesso div in questione e sostituiranno il vecchio contenuto con quello nuovo.

Funzione rilevante:

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

per esempio

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

Nota, il caricamento sostituisce automaticamente il contenuto. Assicurati di includere uno spazio prima del selettore dell'ID.

Supponiamo che tu abbia 2 div all'interno del tuo file html.

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

Il programma java stesso non può aggiornare il contenuto del file html perché html è correlato al client, mentre java è correlato al back-end.

È tuttavia possibile comunicare tra il server (il back-end) e il client.

Quello di cui stiamo parlando è AJAX, che ottieni usando JavaScript, ti consiglio di usare jQuery che è una libreria JavaScript comune.

Supponiamo che tu voglia aggiornare la pagina ogni intervallo costante, quindi puoi usare la funzione intervallo per ripetere la stessa azione ogni x volta.

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

Puoi anche farlo in questo modo:

setTimeout(foo, 30000);

Whereea foo è una funzione.

Al posto dell'avviso ("ciao") puoi eseguire la richiesta AJAX, che invia una richiesta al server e riceve alcune informazioni (ad esempio il nuovo testo) che puoi usare per caricare nel div.

Un AJAX classico si presenta così:

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

Laddove il backend è in grado di ricevere dati inseriti in POST ed è in grado di restituire un oggetto dati di informazioni, ad esempio (e molto preferibile) JSON, ci sono molti tutorial là fuori su come farlo, GSON di Google è qualcosa che io usato un po 'di tempo fa, potresti dare un'occhiata.

Non sono professionale con la ricezione di Java POST e la restituzione di JSON di questo tipo, quindi non ho intenzione di darti un esempio con questo, ma spero che questo sia un inizio decente.

Devi farlo sul lato client, ad esempio, con jQuery.

Supponiamo che tu voglia recuperare HTML in div con ID mydiv:

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

Puoi aggiornare questa parte della pagina con jQuery come segue:

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

Sul lato server è necessario implementare il gestore per le richieste in arrivo /api/mydive restituire il frammento di HTML che va all'interno di mydiv.

Guarda questo violino che ho creato per te per un divertente esempio utilizzando jQuery get con i dati di risposta JSON: http://jsfiddle.net/t35F9/1/

Usa fetche innerHTMLper caricare il contenuto 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()le funzioni di jQuery inviano internamente la XML HTTPrichiesta. tra questi il load()è dedicato solo per un particolare DOM Element. Vedi jQuery Ajax Doc . Un QA dei dettagli su questi sono qui .