Actualiser une partie de la page (div)

J'ai un fichier html de base qui est attaché à un programme java. Ce programme java met à jour le contenu d'une partie du fichier HTML chaque fois que la page est actualisée. Je souhaite actualiser uniquement cette partie de la page après chaque intervalle de temps. Je peux placer la partie que je souhaite actualiser dans un div, mais je ne sais pas comment actualiser uniquement le contenu du fichier div. Toute aide serait appréciée. Je vous remercie.

Utilisez Ajax pour cela.

Construisez une fonction qui récupérera la page actuelle via ajax, mais pas la page entière, juste le div en question sur le serveur. Les données seront ensuite (à nouveau via jQuery) placées dans le même div en question et remplaceront l'ancien contenu par un nouveau.

Fonction pertinente:

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

par exemple

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

Notez que le chargement remplace automatiquement le contenu. Veillez à inclure un espace avant le sélecteur d'identifiant.

Supposons que vous ayez 2 div à l'intérieur de votre fichier html.

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

Le programme java lui-même ne peut pas mettre à jour le contenu du fichier html car le html est lié au client, tandis que java est lié au back-end.

Vous pouvez cependant communiquer entre le serveur (le back-end) et le client.

Ce dont nous parlons est AJAX, que vous obtenez en utilisant JavaScript, je recommande d'utiliser jQuery qui est une bibliothèque JavaScript commune.

Supposons que vous souhaitiez actualiser la page à chaque intervalle constant, vous pouvez alors utiliser la fonction d'intervalle pour répéter la même action toutes les x fois.

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

Vous pouvez également le faire comme ceci:

setTimeout(foo, 30000);

Où un toto est une fonction.

Au lieu de l'alerte ("hi"), vous pouvez effectuer la requête AJAX, qui envoie une requête au serveur et reçoit des informations (par exemple le nouveau texte) que vous pouvez utiliser pour charger dans le div.

Un AJAX classique ressemble à ceci:

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

Lorsque le backend est capable de recevoir des données POST'ed et est capable de renvoyer un objet de données d'informations, par exemple (et très préférable) JSON, il existe de nombreux tutoriels sur la façon de le faire, GSON de Google est quelque chose que je utilisé il y a quelque temps, vous pourriez y jeter un coup d'œil.

Je ne suis pas professionnel avec la réception Java POST et le retour JSON de ce type, donc je ne vais pas vous donner d'exemple avec cela, mais j'espère que c'est un bon début.

Vous devez le faire côté client, par exemple avec jQuery.

Supposons que vous souhaitiez récupérer du HTML en div avec l'ID mydiv:

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

Vous pouvez mettre à jour cette partie de la page avec jQuery comme suit:

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

Du côté serveur, vous devez implémenter un gestionnaire pour les requêtes arrivant /api/mydivet renvoyer le fragment de HTML qui entre dans mydiv.

Voir ce violon que j'ai créé pour vous pour un exemple amusant utilisant jQuery get avec les données de réponse JSON: http://jsfiddle.net/t35F9/1/

Utiliser fetchet innerHTMLpour charger du contenu 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()les fonctions de jQuery envoient une XML HTTPrequête en interne . parmi ceux-ci, le load()n'est dédié qu'à un particulier DOM Element. Voir jQuery Ajax Doc . Un QA de détails sur ceux-ci sont ici .