首頁 >web前端 >js教程 >JQuery實作定時刷新實例講解

JQuery實作定時刷新實例講解

小云云
小云云原創
2018-01-12 10:05:422756瀏覽

本文主要和大家分享JQuery實作定時刷新實例講解,在網頁開發中,常常會需要不斷的刷新某個頁面或某個局部資料。這時候就需要用到定時刷新來實現了。實作方式就是使用JS setInterval函數每隔一段時間請求一次數據,然後將請求結果傳回前端HTML實作刷新。

實作程式碼如下:


<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>

程式碼解釋:

1. 導入jquery


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

使用上面的語句匯入JQuery函式庫,下面的程式碼需要JQuery函式庫的支援。

2. 頁面載入完啟動程序


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

一般定時任務需要在頁面載入完成之後就啟動。頁面載入完成有兩種事件,一是ready,表示文檔結構已經載入完成(不包含圖片等非文字媒體檔案),二是onload,指示頁麵包含圖片等文件在內的所有元素都載入完成(可以說:ready 在onload 前觸發)。

建議在ready時就執行定時任務,並使用下面的程式碼實作:


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

上面的程式碼等價於:


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

3. 取得資料並重新整理頁面

使用下面的程式碼取得資料並設定頁面對應的值。從而刷新頁面資料。這個步驟是根據自己的需求寫出對應的程式碼。


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

相關推薦:

Ajax實作無閃爍定時刷新頁面實例程式碼

如何在jquery中設定定時刷新

Html之網頁的定時跳轉與定時刷新_html/css_WEB-ITnose

以上是JQuery實作定時刷新實例講解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn