JQuery-Implementierung geplanter Aktualisierungsbeispiele

In diesem Artikel wird hauptsächlich ein Beispiel für die Implementierung der geplanten Aktualisierung durch JQuery vorgestellt. In der Webentwicklung ist es häufig erforderlich, eine bestimmte Seite oder einen bestimmten Teil der Daten kontinuierlich zu aktualisieren. Zu diesem Zeitpunkt müssen Sie die geplante Aktualisierung verwenden, um dies zu erreichen. Die Implementierung besteht darin, die JS-Funktion setInterval zu verwenden, um in regelmäßigen Abständen Daten anzufordern und die Anforderungsergebnisse dann zur Aktualisierung an das Front-End-HTML zurückzugeben.

Der Implementierungscode lautet wie folgt:

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
 $(function(){
  getData();
  setInterval(function(){
   getData();
  }, 3000);
 });
 functiongetData(){
  $.getJSON("/blood/pressure/1", function(data){
   if (200 == data.code) {
    $("#systolic").text(data.data.systolic);
    $("#diastolic").text(data.data.diastolic);
    $("#pulse").text(data.data.pulse);
   }
  });
 };
</script>

Codeerklärung:

1. Jquery importieren

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

Verwenden Sie die obige Anweisung, um die JQuery-Bibliothek zu importieren. Der folgende Code erfordert die Unterstützung der JQuery-Bibliothek.

2. Starten Sie das Programm, nachdem die Seite geladen ist

$(function(){
 getData(); // 第一次加载数据
 // 开启定时任务，时间间隔为3000 ms。
 setInterval(function(){
  getData();
 }, 3000);
});

Im Allgemeinen müssen geplante Aufgaben gestartet werden, nachdem die Seite geladen wurde. Beim Laden der Seite gibt es zwei Ereignisse: Das eine zeigt an, dass die Dokumentstruktur geladen wurde (mit Ausnahme von Nicht-Text-Mediendateien wie Bildern). Das andere ist „Onload“, das anzeigt, dass alle Elemente der Seite einschließlich der Bilder geladen wurden und andere Dateien wurden geladen (man kann sagen, dass :ready vor dem Onload ausgelöst wird).

Es wird empfohlen, geplante Aufgaben auszuführen, wenn sie bereit sind, und den folgenden Code zu verwenden, um dies zu erreichen:

$(function(){
 // do sometion
});

Der obige Code entspricht:

$(document).ready(function(){ 
 //do something
})

3. Daten abrufen und Seite aktualisieren

Verwenden Sie den folgenden Code, um die Daten abzurufen und den entsprechenden Wert auf der Seite festzulegen. Dadurch werden die Seitendaten aktualisiert. Schreiben Sie in diesem Schritt den entsprechenden Code entsprechend Ihren eigenen Anforderungen.

functiongetData(){
 $.getJSON("/blood/pressure/1", function(data){
  if (200 == data.code) {
   $("#systolic").text(data.data.systolic);
   $("#diastolic").text(data.data.diastolic);
   $("#pulse").text(data.data.pulse);
  }
 });
};

Verwandte Empfehlungen:

Ajax-Beispielcode für flimmerfreie geplante Seitenaktualisierung

So richten Sie eine geplante Aktualisierung in jquery ein

Geplanter HTML-Webseitensprung und geplante Aktualisierung_html/css_WEB-ITnose

Das obige ist der detaillierte Inhalt vonJQuery-Implementierung geplanter Aktualisierungsbeispiele. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!