目錄：
引言：
在看這個案列之前，你應該掌握ajax獲取數據的4幾個步驟，跨域的問題，模板引擎，常見數據格式解析以及api文檔的閱讀，掌握的這些 知識點，我在前面的文章裏都有寫過，有興趣的可以看看，方便接下來的理解，先來放放案例效果吧
案例準備：
API的獲取使用：
網上搜索免費API有很多(只用的起免費的。。) 這裏我用的是聚合數據提供的免費API，先去註冊，在去搜索想要的API點擊申請，申請完了就會在個人中心，我的接口中看到，注意我們要用的是它提供的AppKey
API文檔：
案例目錄結構：
js放單獨文件夾最好，這隨意。。。template.js是使用模板引擎要引用的文件 不太明白？=》巧用模板引擎事半功倍
案例內容 ：
代碼塊：
- his.php(後端人員寫好的，簡單瞭解一下)
<?php
//在php中,獲取一個鏈接中的數據
//設置編碼
header("Content-Type:text/plain;charset=utf-8");
//拿到前端的數據
$month=$_GET["month"];
$day=$_GET["day"];
//使用curl進行網絡數據訪問
$ch =curl_init();
//網絡訪問的url地址
$url="http://api.juheapi.com/japi/toh?key='你的AppKey'&v=1.0&month=".$month."&day=".$day;
curl_setopt($ch,CURLOPT_RETURNTRANSFER,1);
//執行HTTP請求
curl_setopt($ch,CURLOPT_URL,$url);
//得到數據
$res=curl_exec($ch);
echo $res;
?>
-
his.html
只要關注script標籤中的內容就行，簡單的html+css不用浪費時間，尤其是本案例的核心部分 $ajax({})中的內容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>歷史殺昂</title>
<!--引入jq文件-->
<script src="jquery.js"></script>
<script src="template.js"></script>
<script type="text/html" id='history'>
<ul>
{{each result as value i}}
<li>
{{if value.pic==''}}
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1590050329662&di=fb753d04b1b9d1946891a2a38db4164b&imgtype=0&src=http%3A%2F%2Fpic.616pic.com%2Fys_bnew_img%2F00%2F11%2F69%2Fj2AjnHspwT.jpg" alt=""> {{else}}
<img src="{{value.pic}}" alt=""> {{/if}}
<span style="font-size:14px; margin-right:20px">{{value.year}}年{{value.month}}月{{value.day}}日</span>
<span>{{value.title}}</span>
</li>
{{/each}}
</ul>
</script>
<script>
$(function() {
//點擊事件
$("#btn").click(function() {
//獲取用戶輸
$('#div').html('');
var month = Number($("#month").val());
var day = Number($("#day").val());
//ajax獲取數據
$.ajax({
url: "./his.php",
data: {
month: month,
day: day
},
dataType: "json",
success: function(data) {
function compare(index) {
return (a, b) => b[index] - a[index];
}
data.result = data.result.sort(compare('year'));
console.log(data);
var html = template("history", data);
$('#result').html(html);
}
})
});
})
</script>
</head>
<style>
* {
padding: 0;
margin: 0;
}
.box {
width: 1000px;
margin: 50px auto;
}
.box img {
width: 100px;
height: 100px;
vertical-align: middle;
}
li {
list-style: none;
height: 100px;
margin-bottom: 20px;
}
li:hover {
background-color: rgb(206, 202, 202);
}
</style>
<body>
<div class="box">
<h2>歷史上的今天</h2>
<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2897154913,2241836852&fm=15&gp=0.jpg" alt="" style="border-radius: 50%;">
<span>歷史上的</span>
<select id="month">
<option value="01" selected="selected">1</option>
<option value="02">2</option>
<option value="03">3</option>
<option value="04">4</option>
<option value="05">5</option>
<option value="06">6</option>
<option value="07">7</option>
<option value="08">8</option>
<option value="09">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select> 月
<select id="day">
<option value="01" selected="selected">1</option>
<option value="02">2</option>
<option value="03">3</option>
<option value="04">4</option>
<option value="05">5</option>
<option value="06">6</option>
<option value="07">7</option>
<option value="08">8</option>
<option value="09">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select> 日
<button id="btn">查詢</button>
<!--顯示到此div中-->
<div id="result"></div>
</div>
</body>
</html>
注意！！！：
爲什麼要寫his.php文件，直接將dataType:"jsonp" url地址爲接口地址不行嗎？？？
答：我們數據類型雖然是json格式的，但是不是以函數調用的方法返回的數據（前面文章有提），這樣跨域和ajax都是獲取不到的，只有以方法調用的形似返回數據，纔可以這樣，所以要通過本地的php文件來訪問接口，因爲他是後端開發語言，他的訪問是不受同源策略限制，任何頁面都能訪問到
這個{{}}是什麼鬼？
答：模板引擎使用=》模板引擎
$.ajax({})中定義的compare()函數幹嘛用的？？？
答：獲取的數據沒有完全按時間順序來，寫個compare函數，來通過js中sort函數來按照year的順序輸出
結束：
這個案例用的一些知識點，如果你跟我一樣是小白，可以先看看前面的文章，或者問度娘，如果你是大牛，歡迎提出建議， 可以在評論區交流哦~