2017-11-06 1 views
0

Grundsätzlich habe ich eine REST API, die ein JSON zurückgeben. In diesem JSON wird das zuletzt angezeigte Thema zurückgegeben. Zum BeispielWie Sie dynamische Daten anhängen

{ lastview : ABC } 

Deshalb möchte ich diese

<div class = 'lastview'>Last viewed topic: </div> 

$.getJSON("json link", function(data){ 
$('<a/>',{ 
text: data.lastview 
}).appendTo('.lastview'); 

Aber da diese Daten nach einem anderen Thema ändern gesehen auf meiner Seite ist, kann einzufügen. Was ich meine ist, wenn Benutzer zu einem anderen Themenname XYZ gehen, ändern die JSON letzten Ansicht von ABC zu XYZ, aber die im Web wird nicht (immer noch ABC), weil es nur die Funktion einmal ausführen, wenn die Seite geladen wird.

So ist es trotzdem dynamisch die JSON zu überprüfen und richtig zurück, wenn sich der Inhalt ändert (Was ich meine ist, wenn das lastview Thema Änderung XYZ, die man in div automatisch XYZ ändern)

Dank

+0

Eine Möglichkeit, Polling zu halten ist – AngYC

+0

bedeutet, rufen Sie die Funktion auf, um alle 500ms auszuführen? Ich glaube, dass diese Methode die Seite zum Nachlaufen bringen wird –

+0

Es gibt keine Möglichkeit zu wissen, ob es ein Update gibt, außer wenn andere API wie WebSocket/Web Push-Benachrichtigung verwendet wird, dies erfordert sowohl das Frontend als auch das Backend, REST kann nur ziehen, aber nicht drücken – AngYC

Antwort

0

Die Methode setTimeout() ruft eine Funktion auf oder wertet einen Ausdruck nach einer angegebenen Anzahl von Millisekunden aus.

1000 ms = 1 Sekunde.

Die Funktion wird nur einmal ausgeführt. Wenn Sie die Ausführung wiederholen müssen, verwenden Sie die Methode setInterval().

setInterval({ 

$.getJSON("json link", function(data){ 

$('<a/>', 
     { 

     text: data.lastview 

     }).appendTo('.lastview'); 


}, 1000); 
0

Dies ist eine Probe von keep anfordert und aktualisieren für Daten (sagen wir mal, `setTimeout` alle 500ms) Sie alle 500ms

setInterval(function() { 
 
    // Fake ajax 
 
    data = { lastview: "Page " + Math.floor(Math.random() * 3) }; 
 
    // Just for demo 
 
    
 
    $("#lastview").empty(); 
 
    $("#lastview").append(
 
     $("<a></a>").text(data.lastview) 
 
    ); 
 
}, 1000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div>Last viewed topic: <span id="lastview"></span></div>