JQueryがタイミングリフレッシュ機能コードを実現
2004 ワード
Web開発では、ページやローカルデータの更新が絶えず必要になることがよくあります.この場合,タイミングリフレッシュを用いて実現する必要がある.インプリメンテーションは、JS setInterval関数を使用して一定時間ごとにデータを要求し、要求結果をフロントエンドHTMLインプリメンテーションリフレッシュに返すことです.
実装コードは次のとおりです.
コードの説明:
1.jqueryのインポート
の を してJQueryライブラリをインポートします. のコードはJQueryライブラリのサポートが です.
2.ページロード イニシエータ
なタイミングタスクは、ページのロードが した に する があります.ページのロードが するには、readyという2つのイベントがあり、1つはreadyであり、ドキュメント がロードされたこと( などの メディアファイルを まない)を し、2つはonloadであり、ページに などのファイルを むすべての がロードされたことを す(readyはonloadの にタッチすると える).
readyでは、 のコードを してタイミングタスクを することを します.
のコードは のようなものです.
3.データを し、ページをリフレッシュする
のコードを してデータを し、ページに する を します.ページデータをリフレッシュします.この は のニーズに じて するコードを きます.
実装コードは次のとおりです.
$(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);
}
});
};