Actualiser 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 actualisée. Je veux actualiser seulement cette partie de la page après chaque intervalle de temps. Je peux placer la partie que je voudrais rafraîchir dans un div, mais je ne suis pas sûr de savoir comment rafraîchir seulement le contenu de la div. Toute aide serait appréciée. Je vous remercie.

Answer 1

Utiliser Ajax pour cela.

Construire une fonction qui récupérera la page en cours via ajax, mais pas la page, juste la div en question du serveur. Les données seront ensuite (à nouveau via jQuery) être placées dans la même div en question et remplacer l'ancien contenu par un nouveau.

fonction correspondante:

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

par exemple,

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

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

Answer 2

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

Disons que vous voulez récupérer HTML dans 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: Dans le côté serveur

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

vous besoin d'implémenter le gestionnaire pour les requêtes arrivant à /api/mydiv et retourner le fragment de HTML qui va dans mydiv.

Voir ce Fiddle je fait pour vous un exemple amusant en utilisant jQuery obtenir des données de réponse JSON: http://jsfiddle.net/t35F9/1/

Answer 3

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 parce que le html est lié au client, quant à lui java est lié à l'arrière-plan.

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

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

Supposons que vous voulez rafraîchir la page à chaque intervalle constant, vous pouvez utiliser la fonction d'intervalle pour répéter la même action chaque fois que x.

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

Vous pouvez aussi le faire comme ceci:

setTimeout(foo, 30000); 

Whereea foo est une fonction.A la place 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 dans la 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 back-end est oùA en mesure de recevoir des données et est capable méthode POST pour renvoyer un objet de données d'information, par exemple (et très preferrable) JSON, il Il existe de nombreux tutoriels sur la façon de le faire, GSON de Google est quelque chose que j'ai utilisé il y a quelque temps, vous pouvez jeter un oeil à cela.

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

Answer 4

$.ajax(), $.get(), $.post(), $.load() les fonctions de jQuery envoient en interne XML HTTP demande. parmi ceux-ci le load() est seulement dédié pour un DOM Element particulier. Voir jQuery Ajax Doc. Un détail Q.A. sur ceux-ci sont Here.