Rafraîchir une partie de la page (div)

Question

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 rafraîchie. Je veux rafraîchir uniquement cette partie de la page après chaque intervalle de temps. Je peux placer la partie que je souhaite rafraîchir dans un fichier de type div mais je ne suis pas sûr de savoir comment rafraîchir uniquement le contenu du fichier div . Toute aide serait appréciée. Merci.

Answer 1

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 depuis le serveur. Les données seront ensuite (toujours via jQuery) placées dans la même div en question et remplaceront l'ancien contenu par le nouveau.

Fonction pertinente :

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

par exemple

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

Attention, le chargement remplace automatiquement le contenu. Veillez à inclure un espace avant le sélecteur id.

Answer 2

Supposons que vous ayez 2 divs dans 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, alors que java est lié au back-end.

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

Nous parlons ici d'AJAX, que vous pouvez réaliser en utilisant JavaScript. Je vous recommande d'utiliser jQuery, une bibliothèque JavaScript courante.

Supposons que vous souhaitiez rafraîchir la page à intervalle constant, vous pouvez alors utiliser la fonction d'intervalle pour répéter la même action tous les x temps.

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

Vous pourriez aussi le faire comme ceci :

setTimeout(foo, 30000);

Où foo est une fonction.

Au lieu d'utiliser alert("hi"), vous pouvez effectuer une requête AJAX, qui envoie une demande 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.
    }
});

Le backend est capable de recevoir des données POST et de renvoyer un objet d'information, par exemple (et de préférence) JSON. Il existe de nombreux tutoriels sur la façon de procéder, GSON de Google est un outil que j'ai utilisé il y a quelque temps, vous pouvez y jeter un œil.

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

Answer 3

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

Disons que vous voulez récupérer le HTML dans le 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é du serveur, vous devez mettre en place un gestionnaire pour les requêtes adressées à /api/mydiv et renvoie le fragment de HTML qui se trouve à l'intérieur de mydiv.

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

Answer 4

Utilisez fetch y innerHTML pour charger le contenu du 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>

Answer 5

$.ajax(), $.get(), $.post(), $.load() Les fonctions internes de jQuery envoient XML HTTP demande. Parmi celles-ci, les load() est uniquement dédié à un DOM Element . Voir jQuery Ajax Doc . Les détails de ces questions sont les suivants Ici .