JQuery implementation of scheduled refresh examples

This article mainly shares with you an example of JQuery's implementation of scheduled refresh. In web development, it is often necessary to continuously refresh a certain page or a certain part of data. At this time, you need to use scheduled refresh to achieve this. The implementation is to use the JS setInterval function to request data at regular intervals, and then return the request results to the front-end HTML to refresh.

The implementation code is as follows:

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

Code explanation:

1. Import jquery

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

Use the above statement to import the JQuery library. The following code requires the support of the JQuery library.

2. Start the program after the page is loaded

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

Generally scheduled tasks need to be started after the page is loaded. There are two events when the page is loaded. One is ready, which indicates that the document structure has been loaded (excluding non-text media files such as images). The other is onload, which indicates that all elements of the page including images and other files have been loaded (it can be said that :ready is triggered before onload).

It is recommended to execute scheduled tasks when ready, and use the following code to achieve it:

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

The above code is equivalent to:

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

3. Get data and refresh the page

Use the following code to get the data and set the corresponding value of the page. Thereby refreshing the page data. In this step, write the corresponding code according to your own needs.

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

Related recommendations:

Ajax implementation of flicker-free scheduled refresh page example code

How to Set up scheduled refresh in jquery

Html's scheduled jump and scheduled refresh of web pages_html/css_WEB-ITnose

The above is the detailed content of JQuery implementation of scheduled refresh examples. For more information, please follow other related articles on the PHP Chinese website!