Aktualisieren Teil der Seite (div)

Question

Ich habe eine grundlegende HTML-Datei, die an ein Java-Programm angehängt ist. Dieses Java-Programm aktualisiert den Inhalt eines Teils der HTML-Datei, wenn die Seite aktualisiert wird. Ich möchte nur den Teil der Seite nach jedem Zeitintervall aktualisieren. Ich kann den Teil, den ich gerne auffrischen möchte, in ein Div setzen, aber ich bin mir nicht sicher, wie ich nur den Inhalt des Div auffrischen soll. Jede Hilfe wäre willkommen. Vielen Dank.

Answer 1

Verwendung von Ajax für diese: mit jQuery mit JSON-Antwortdaten erhalten

Sehen Sie diese Fiddle ich für Sie für einen Spaß Beispiel gemacht.

eine Funktion beim Aufbau, den die aktuelle Seite über Ajax wird holen, aber nicht die ganze Seite, sondern nur die div in Frage vom Server. Die Daten werden dann (wiederum über jQuery) in das gleiche div in Frage gestellt und alter Inhalt durch neuen ersetzt.

relevante Funktion:

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

z.B.

Hinweis, lädt automatisch Inhalt ersetzt. Achten Sie darauf, vor dem ID-Selektor ein Leerzeichen einzufügen.

Answer 2

Sie müssen dies auf der Client-Seite zum Beispiel mit jQuery tun.

Angenommen, Sie HTML-Code in div mit der ID abrufen möchten mydiv:

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

Sie diesen Teil mit jQuery auf der Seite aktualisieren können wie folgt:

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

In der Server-Seite Sie müssen den Handler für Anfragen implementieren, die auf /api/mydiv kommen, und das HTML-Fragment zurückgeben, das in mydiv enthalten ist. http://jsfiddle.net/t35F9/1/

Answer 3

Angenommen, Sie haben 2 Divs innerhalb Ihrer HTML-Datei.

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

Das Java-Programm selbst nicht den Inhalt der HTML-Datei aktualisieren, da die HTML an den Client verwandt ist, ist mittlerweile Java auf die Back-End-bezogen.

Sie können jedoch zwischen dem Server (das Back-End) und dem Client kommunizieren.

Was wir reden ist AJAX, die Sie erreichen mit Hilfe von JavaScript, empfehle ich mit jQuery, die eine gemeinsame JavaScript-Bibliothek ist.

Nehmen wir an, Sie die Seite jedes konstanten Intervall aktualisieren möchten, dann können Sie die Intervall-Funktion verwenden, um die gleiche Aktion jedes x Mal zu wiederholen.

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

Sie können es auch tun, wie folgt aus:

setTimeout(foo, 30000); 

Whereea foo eine Funktion ist.

Anstelle des Alerts ("hi") können Sie die AJAX-Anfrage ausführen, die eine Anfrage an den Server sendet und einige Informationen (zum Beispiel den neuen Text) erhält, mit denen Sie in das div laden können.

Ein klassisches AJAX sieht wie folgt aus:

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

wobeia das Backend der Lage ist, POST'ed Daten zu empfangen und kann ein Datenobjekt von Informationen zurückzukehren, zum Beispiel (und sehr preferrable) JSON gibt Es gibt viele Tutorials, wie man das macht, GSON von Google ist etwas, das ich vor einiger Zeit benutzt habe, man könnte es sich genauer ansehen.

Ich bin nicht professionell mit Java-POST-Empfang und JSON-Rückkehr dieser Art, also werde ich Ihnen kein Beispiel damit geben, aber ich hoffe, dass dies ein anständiger Anfang ist.

Answer 4

$.ajax(), $.get(), $.post(), $.load() Funktionen von jQuery intern senden XML HTTP Anfrage. unter diesen die load() ist nur für eine bestimmte DOM Element gewidmet. Siehe jQuery Ajax Doc. A Details Q.A. auf diesen sind Here.