运用aja获取api接口的实时数据

AJAX

即 AJAX Asynchronous JavaScript And XML，用于实现异步刷新

用它的原因

最近一直想通过调用一些数据api接口实现一定的功能，在找到有用的接口后，自己却不知如何获取它的数据，通过网上查阅资料，看到了几种办法。自己觉得能够满足自己需求的情况下，还是ajax简单，方便。所以就开干了…

接口获取地址

这是我最近用的一个网站，提供了很多免费的接口：https://www.tianapi.com/

效果

我个人看博客喜欢先看做实现出来的效果，然后再看代码实现，所以先把我做出来的效果展示出来。

疫情数据展示

采用表格的形式布局

点击下方查看疫情数据按钮，结果将会展示当前接口传来的数据。并且这个数据是会实时更新的（提示：因为这个api并不是和百度上数据的api一致，所以和百度的数据展示会有偏差，不过大部分数据一致）。

主要代码展示

<table class="table table-hover">
 <tr><td>现存确诊</td>
 <td id="currentConfirmedCount"></td>
 <td>累计确诊</td>
 <td id="confirmedCount"></td></tr>
 
  <tr><td>现存疑似</td>
 <td id="suspectedCount"></td>
 <td>累计治愈</td>
 <td id="curedCount"></td></tr>
 
 <tr><td>累计死亡</td>
 <td id="deadCount"></td>
 <td>现存重症</td>
 <td id="seriousCount"></td></tr>
 
 <tr><td colspan="2">新增疑似</td>
 <td  colspan="2" id="suspectedIncr"></td>
 </tr>
 
 <tr><td colspan="2">相比昨天现存确诊人数</td>
 <td  colspan="2" id="currentConfirmedIncr"></td>
 </tr>
 
 <tr><td colspan="2">相比昨天累计确诊人数</td>
 <td  colspan="2" id="confirmedIncr"></td>
 </tr>
 
 <tr><td colspan="2">相比昨天新增治愈人数</td>
 <td  colspan="2" id="curedIncr"></td>
 </tr>
 
 <tr><td colspan="2">相比昨天新增死亡人数</td>
 <td  colspan="2" id="deadIncr"></td>
 </tr>
 
 <tr><td colspan="2">相比昨天现存重症人数</td>
 <td  colspan="2" id="seriousIncr"></td>
 </tr>
 </table>
 
 <button class="btn btn-success" id="show"><span>查看疫情数据</span></button>
 
<script>
/ //这里面的Ajax的实现我运用的是jquery的，page为接口的地址
$(function(){
   $("#show").click(function(){
     var page = "http://api.tianapi.com/txapi/ncov/index?key=用户自己的APIKEY"; //参数key需要自己去我提供的网址中获取
        $.ajax({
        	type:"post",
            url: page,
            dataType:"json",
            success: function(result){
            //从api获取到的json数据中取到自己想要的值。  
            	var res = result.newslist[0].desc;
              	//将值展示在界面到相应的位置
            	$("#currentConfirmedCount").html(res.currentConfirmedCount);
            	$("#confirmedCount").html(res.confirmedCount);
            	$("#suspectedCount").html(res.suspectedCount);
            	$("#curedCount").html(res.curedCount);
            	$("#deadCount").html(res.deadCount);
            	$("#seriousCount").html(res.seriousCount);
            	$("#suspectedIncr").html(res.suspectedIncr);
            	$("#currentConfirmedIncr").html(res.currentConfirmedIncr);
            	$("#confirmedIncr").html(res.confirmedIncr);
            	$("#curedIncr").html(res.curedIncr);
            	$("#deadIncr").html(res.deadIncr);
            	$("#seriousIncr").html(res.seriousIncr);
            }
        });
   });
});
</script>

ajax中相关参数知识可以参考：https://www.cnblogs.com/Steven5007/p/10407677.html

学会了这种用法后，只要给我一个接口，就可以做很多有意思的事情了
比如：做个姓氏起源查询

附 Jquery学习链接：jquery ajax实现讲解