<div id="loading">載入中</div>
<div id="show-data"></div>
$(document).ready(function() {
$.ajax({
type: "GET", // 採用 GET 形式取得資料
url:
"https://cors-anywhere.herokuapp.com/https://mnya.tw/cc/wp-json/wordpress-popular-posts/v1/popular-posts/?post_type=post&range=last24hours&limit=2", // 取得資料的 API 位址
async: true, // 非同步取得 JSON 資料
dataType: "json", // 資料格式
success: function(data) {
// 成功取得資料執行的程式區塊
html = ""; // 存放 HTML 用
for (var i = 0, len = data.length; i < len; i++) {
// 取得每筆資料
//-- 取得資料區 --//
html_link = data[i].link; // 取得文章連結
html_title = data[i].title.rendered; // 取得文章標題
html_featured_img = data[i].jetpack_featured_media_url; // 取得縮圖
html_date = data[i].date.substring(0, 10); // 取得發表日期（時間已被去除）
html_pageviews = data[i].pageviews; // 取得瀏覽量
html_excerpt = data[i].excerpt.rendered.substring(0, 60); // 取得文章摘要（限制在 60 字元以內）
//-- 將資料與 HTML 標籤結合區 --//
html +=
"<a href='" +
html_link +
"'><div><img src='" +
html_featured_img +
"' alt=''></div><h2>" +
html_title +
"</h2></a><div><i>📝 " +
html_date +
" 📊 " +
html_pageviews +
"</i><br>" +
html_excerpt +
"</div>";
//-- Console 偵錯區 --//
console.log(data[i]); // 印出所有取得資料至 Console
}
//-- HTML <body> 寫入區 --//
$("#show-data").append(html); // 將 HTML 塞入 <div id="show-data"></div>
$("#loading").hide(); // 隱藏載入中字樣
}
});
});
External CSS
This Pen doesn't use any external CSS resources.