JQueryがタイミングリフレッシュ機能コードを実現

2004 ワード

Web開発では、ページやローカルデータの更新が絶えず必要になることがよくあります.この場合,タイミングリフレッシュを用いて実現する必要がある.インプリメンテーションは、JS setInterval関数を使用して一定時間ごとにデータを要求し、要求結果をフロントエンドHTMLインプリメンテーションリフレッシュに返すことです.
実装コードは次のとおりです.



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

コードの説明:
1.jqueryのインポート


の を してJQueryライブラリをインポートします. のコードはJQueryライブラリのサポートが です.
2.ページロード イニシエータ

$(function(){
 getData(); //        
 //       ,     3000 ms。
 setInterval(function(){
  getData();
 }, 3000);
});

なタイミングタスクは、ページのロードが した に する があります.ページのロードが するには、readyという2つのイベントがあり、1つはreadyであり、ドキュメント がロードされたこと( などの メディアファイルを まない)を し、2つは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);
  }
 });
};