Implémentation JQuery d'exemples d'actualisation planifiée

Cet article partage principalement avec vous un exemple d'implémentation de l'actualisation planifiée par JQuery. Dans le développement Web, il est souvent nécessaire d'actualiser en permanence une certaine page ou une certaine partie de données. À ce stade, vous devez utiliser l’actualisation programmée pour y parvenir. L'implémentation consiste à utiliser la fonction JS setInterval pour demander des données à intervalles réguliers, puis à renvoyer les résultats de la demande au HTML frontal pour les actualiser.

Le code d'implémentation est le suivant :

<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>

Explication du code :

1. Importer jquery

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

Utilisez l'instruction ci-dessus pour importer la bibliothèque JQuery. Le code suivant nécessite la prise en charge de la bibliothèque JQuery.

2. Démarrez le programme après le chargement de la page

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

Les tâches généralement planifiées doivent être démarrées après le chargement de la page. Il y a deux événements lorsque la page est chargée : l'un est prêt, ce qui indique que la structure du document a été chargée (à l'exclusion des fichiers multimédias non textuels tels que les images). et d'autres fichiers ont été chargés (on peut dire que :ready est déclenché avant le chargement).

Il est recommandé d'exécuter les tâches planifiées lorsque vous êtes prêt, et d'utiliser le code suivant pour y parvenir :

$(function(){
 // do sometion
});

Le code ci-dessus est équivalent à :

$(document).ready(function(){ 
 //do something
})

3. Obtenez les données et actualisez la page

Utilisez le code ci-dessous pour obtenir les données et définir la valeur correspondante sur la page. Actualisant ainsi les données de la page. Dans cette étape, écrivez le code correspondant en fonction de vos propres besoins.

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

Recommandations associées :

Exemple de code Ajax pour une actualisation programmée de la page sans scintillement

Comment configurer l'actualisation programmée dans jquery

Saut programmé de la page Web HTML et actualisation programmée_html/css_WEB-ITnose

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!