使用jQuery取得JSON資料 - 簡易隨機詩詞產生器
什麼是jQuery
jQuery是繼prototype之後又一個優秀的Javascript庫。它是輕量級的js庫，它兼容CSS3，還兼容各種瀏覽器（IE 6.0+, FF1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及後續版本將不再支持IE6/ 7/8瀏覽器。
jQuery使用戶能更方便地處理HTML、events、實現動畫效果，並且方便地為網站提供AJAX交互。jQuery還有一個比較大的優勢是，它的文檔說明很全，而且各種應用也說得很詳細，同時還有許多成熟的插件可供選擇。 jQuery能夠使用戶的html頁面保持代碼和html內容分離，也就是說，不用再在html裡面插入一堆js來調用命令了，只需要定義id即可。
jquery官網提供2種jQuery的下載，一種是jquery.js另一種是jquery.min.js。
文件名不一定完全相同，但通常情況下：
-
jquery.js是完整的未壓縮的jQuery庫，文件比較大，一般用於閱讀學習源碼或修改源碼，一般不用於線上項目。
-
jquery.min.js是由完整版的jQuery庫經過壓縮得來，壓縮後功能與未壓縮的完全一樣，只是將其中的空白字符、註釋、空行等與邏輯無關的內容刪除，並進行一些優化。這個版本一般用於網站引用使用，減小文件體積，降低網站流量，提升訪問速度等。
載入jQuery
使用jQuery時你必須先將jQuery加進網頁的<head>..</head>之間。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
當然你可以選擇將jquery.min.js下載上傳至網站直接使用，也可以藉由CDN載入。
使用CDN載入的好處是若不同的網站使用同樣的連結時可以避免重複下載，也不必在自己的伺服器上部署jQuery檔案。
隨機詩詞產生器
當然這就需要API了，我們以今日詩詞的API作為示範：
以下為使用jQuery取得JSON資料的寫法，放在<head>..</head>：
<script type="text/javascript">
function nextshi(){
$.getJSON("https://v1.jinrishici.com/all.json",function(json){ //替換API的位址
/*json為function的名稱,後面接JSON中的類別,使用點(.)相連*/
category = json.category; //分類
author = json.author; //作者
content = json.content; //內容
origin = json.origin; //原文
/*使用json取得的資料改變元素的內容*/
$(".shi-content").html(content);
$(".shi-author").html(author);
$(".shi-category").html(category);
$(".shi-origin").html(origin);
});
}
</script>
以下為放在<body>...</body>的內容：
<h1><ins class="shi-origin">標題</ins></h1>
<cite class="shi-author">作者</cite>
<br>
<blockquote>
<div class="shi-content">內文</div>
</blockquote>
分類：<font class="shi-category"></font>
<p>
<button onclick="javascript:nextshi();">Random</button> //使用按鈕來隨機產生
範例效果
- 未按按鈕前
- 隨機產生後
