After the outbreak of the new crown pneumonia epidemic, the daily epidemic data affects the hearts of people across the country. For every number, there are countless clinical medical staff, disease control and epidemiological team members, and grassroots staff working hard for it; every number may affect the judgment of the epidemic trend; Hundreds of millions of compatriots are always watching. Epidemic information statistics In this "epidemic" war without gunpowder, data is used to guide the direction of front-line work. A little sloppy basic data may lead to errors in the research and judgment of the epidemic, which will put people's lives at risk. The epidemic information statistics staff sort out and summarize the epidemic data, and each piece of data needs to be carefully screened and checked until it is approved and verified. It is their spirit of "giving up the small family to take care of everyone" that always puts the work first and the overall situation at the top of the critical period, regardless of personal gains and losses, and the spirit of "letting go of the small family to take care of everyone" demonstrates the good style of daring to take responsibility and the precious character of selfless dedication.
According to statistics, the epidemic is serious, but judging from the number of cured people, it shows a rapid upward trend, which is much higher than the death rate. From this we can see the strength of our country's medical technology, and the spirit of selfless dedication of medical staff demonstrates the national spirit, the spirit of the times and the national spirit. This is the great Chinese spirit!
1. Case presentation
This section uses the $.Ajax() method to realize the real-time tracking data display of the national epidemic situation as shown in Figure 10-10 , and the data comes from the Tencent server.
Figure 10-10 National Epidemic Real-time Tracking Data Display
2. Case Analysis
Open the real-time tracking page of Tencent's new coronavirus pneumonia epidemic situation, as shown in Figure 10-11 , and then press the shortcut key F12 to open the Network module of the developer tool to obtain the interface address of the domestic epidemic data, the data sent to the server and the data returned by the server , as shown in Figure 10-12 . The label 1 represents the address of the server data interface and the data sent to the server, and the label 2 represents the response data returned by the server.
Figure 10-11 Tencent's real-time tracking page of the novel coronavirus pneumonia epidemic
Figure 10-12 Interface address and data of domestic epidemic data
The call of the $.Ajax method is as follows.
$.Ajax({
url: '服务器地址',
data: {modules: 'statisGradeCityDetail,diseaseh5Shelf' },
success:function(res){
console.log(typeof res);
console.log(res);//输出获取的数据
}
});
The obtained real-time tracking data of the national epidemic situation is shown in Figure 10-13 .
Figure 10-13 National Epidemic Real-time Tracking Data
Among them, areaTree saves the detailed data of the epidemic in 34 provinces across the country; ChinaTotal saves the data of 12,590 local confirmed cases and a total of 752,053 confirmed cases; lastUpdateTime saves the latest update time. The data used in the case is stored in the attributes chinaTotal and lastUpdateTime , and the data can be taken out in turn and displayed on the page.
3. Case realization
After the above analysis, the JavaScript code of this case is as follows, and the HTML and CSS codes are detailed in the source code of this book.
<!--引入jquery框架-->
1 <script src="js/jquery.min.js"></script>
2 <script>
3 var tds = document.querySelectorAll('td');
4 $.Ajax({
5 url: ' 服务器地址 ',
6 data: { modules: 'statisGradeCityDetail,diseaseh5Shelf'},
7 dataType: 'jsonp',
8 success: function (res) {
9 //第1个单元格的内容设置为本土现有确诊
10 tds[0].innerHTML = res.data.diseaseh5Shelf.chinaTotal.localConfirm;
11 //第2个单元格的内容设置为现有确诊
12 tds[1].innerHTML = res.data.diseaseh5Shelf.chinaTotal.nowConfirm;
13 //第3个单元格的内容设置为累计确诊
14 tds[2].innerHTML = res.data.diseaseh5Shelf.chinaTotal.confirm;
15 //第4个单元格的内容设置为无症状感染者
16 tds[3].innerHTML = res.data.diseaseh5Shelf.chinaTotal.noInfect;
17 //第5个单元格的内容设置为境外输入
18 tds[4].innerHTML = res.data.diseaseh5Shelf.chinaTotal.importedCase;
19 //第6个单元格的内容设置为累计死亡
20 tds[5].innerHTML = res.data.diseaseh5Shelf.chinaTotal.dead;
21 //第7个单元格的内容设置为统计截至时间
22 tds[6].innerHTML = "统计截至" + res.data.diseaseh5Shelf.lastUpdateTime;
23 }
24 });
25 </script>
In the above code, the first line of code introduces the jQuery library; the fourth line of code calls the $.Ajax() method of the jQuery library to complete data interaction with the server. Lines 10-22 of the code display the obtained values in the corresponding cells.
Video explanation: ajax technology - access to real-time data of the global new crown epidemic_哔哩哔哩_bilibili