本文主要和大家分享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);
}
});
};相關推薦：
Html之網頁的定時跳轉與定時刷新_html/css_WEB-ITnose
以上是JQuery實作定時刷新實例講解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
