web-dev-qa-db-fra.com

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 actualisation de la page. 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 de div. Toute aide serait appréciée. Je vous remercie.

javascripthtmlrefresh
81
user760220

Utilisez Ajax pour cela.

Construire une fonction qui va chercher la page en cours via ajax, mais pas la page entière, juste la div en question du serveur. Les données seront ensuite (toujours via jQuery) placées dans la même division en question et remplaceront le contenu ancien par le nouveau.

Fonction pertinente:

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

par exemple.

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

Remarque, le chargement remplace automatiquement le contenu. Assurez-vous d'inclure un espace avant le sélecteur d'identifiant.

105
user1721135

Supposons que vous avez 2 divs à 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 celui-ci est lié au client, tandis que Java est lié au back-end.

Vous pouvez toutefois communiquer entre le serveur (le serveur principal) et le client.

Nous parlons d’AJAX, que vous réalisez en utilisant JavaScript. Je vous recommande d’utiliser jQuery, une bibliothèque JavaScript commune.

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

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

Vous pouvez aussi le faire comme ceci:

setTimeout(foo, 30000);

Où foo est une fonction.

Au lieu de l'alerte ("hi"), vous pouvez exécuter 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 le div.

Un classique AJAX 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 et peut renvoyer un objet de données d'informations, par exemple JSON (et de loin préférable), il existe de nombreux tutoriels pour savoir comment le faire. GSON de Google est quelque chose que je utilisé un peu en arrière, vous pourriez jeter un oeil à ce sujet.

Je ne suis pas professionnel avec Java POST recevoir et retourner JSON de cette sorte, donc je ne vais pas vous donner un exemple, mais j'espère que c'est un bon début.

17
Jonast92

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

Supposons que vous souhaitiez récupérer du code HTML dans un div portant 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);
});

Sur le côté serveur, vous devez implémenter le gestionnaire pour les demandes venant de /api/mydiv et renvoyer le fragment de HTML qui se trouve dans mydiv.

Voir ceci Fiddle Je vous ai présenté un exemple amusant utilisant jQuery avec les données de réponse JSON: http://jsfiddle.net/t35F9/1/

10
jsalonen

Utilisezfetch et innerHTML pour charger le contenu div

let url="https://server.test-cors.org/server?id=2934825&enable=true&status=200&credentials=false&methods=GET"

async function refresh() {
  btn.style.visibility= "hidden";
  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()">Start refreshing (2s)</button>
</div>

<div id="dynamicPart">Dynamic part</div>
1
Kamil Kiełczewski

$.ajax(), $.get(), $.post(), $.load() les fonctions de jQuery envoient en interne la demande XML HTTP. parmi celles-ci, la load() n'est dédiée qu'à un DOM Element particulier. Voir jQuery Ajax Doc . Un détail Q.A. sur ceux-ci sont Ici .

1
Mr. Mak