AJAX
That AJAX Asynchronous JavaScript And XML, used to implement asynchronous refresh
Use it because of
Recent always wanted api interface to achieve certain functions by calling some of the data, after finding useful interface, but do not know how to get its own data through online access to information, see several ways. Case feel able to meet their needs, or ajax simple and convenient. So we did open ...
Interface to obtain an address
This is a site I recently used, offers many free interfaces: https://www.tianapi.com/
effect
Personally, I like to look at the blog to see the effect will achieve it, and then look at the code to achieve, so I do put out the effect displayed.
Epidemic data show
Tabular format layout
Click the button below to view the epidemic data, the results will show data from the current interface. And this data will be updated in real time (Tip: Because this is not the api and consistent data on Baidu, and Baidu so the data will show a deviation api, but consistent with most of the data).
The main code shows
<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 knowledge can refer to the relevant parameters: https://www.cnblogs.com/Steven5007/p/10407677.html
After learned this usage, just give me one interface, you can do many interesting things
such as: to be the origin of surname queries
Learning Jquery link attached: jQuery ajax realize explain
