首頁 > 網際網路

如何使用JS實現無重新整理定時取資料

2019-12-12 11:42:56

使用js實現無重新整理定時取資料,其實就是使用js的ajax方法,從後台獲取資料,然後,更新頁面的區域性內容。本文就為你演示實現方式

1

開啟vscode,建立一個測試html頁面,用於演示js實現無重新整理定時取資料,也就是ajax的區域性重新整理實現方式


2

在測試頁面的同級,新增一個jquery的原始檔,目的是為了js操作的便利性,然後,將jquery原始檔引入到測試頁面中


3

在測試頁面中,新增兩個div,第一個div的內容,後續將定時重新整理。第二為div的內容將一直固定不變,目的是演示介面無重新整理取數更新區域性


4

在測試頁面的底部,新增js程式碼,先寫一個js方法,傳送ajax請求,從後台獲取資料,然後更新到第一個div的位置。此處僅做演示,所以,這個ajax方法僅僅只是大概結構,因為沒有做後台服務,執行不起來


5

上一步已經演示了ajax從後台獲取資料,然後更新的架子。現在再加另外一個方法,在這個方法中,將當前時間更新到第一個div


6

由於要定時執行,就需要使用到js的setInterval方法,按照指定間隔的時間呼叫上一步的方法了。需要注意的是setInterval方法的時間間隔單位是毫秒


7

在瀏覽器中開啟測試頁面,就能看到頁面沒有重新整理,但是,第一個div的內容卻在第6步指定的時間間隔中重新整理了



IT145.com E-mail:sddin#qq.com