ホームページ > 記事 > ウェブフロントエンド > スケジュールされた更新の例の JQuery 実装

スケジュールされた更新の例の JQuery 実装

小云云オリジナル: 2018-01-12 10:05:422726ブラウズ

この記事では主に、JQuery のスケジュールされた更新の実装例を紹介します。Web 開発では、特定のページまたはデータの特定の部分を継続的に更新する必要があることがよくあります。現時点では、これを実現するには、スケジュールされた更新を使用する必要があります。実装では、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 ライブラリのサポートを必要とします。。

2. ページが読み込まれた後にプログラムを開始します

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

通常、スケジュールされたタスクはページが読み込まれた後に開始する必要があります。ページが読み込まれるときは 2 つのイベントがあります。1 つは準備完了であり、ドキュメント構造が読み込まれたことを示します (画像などの非テキストメディアファイルを除く)。もう 1 つは画像を含むページのすべての要素が読み込まれたことを示します。および他のファイルがロードされています (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);
  }
 });
};

スケジュールされた更新の例の JQuery 実装

関連記事