使用jQuery取得JSON資料 - 簡易隨機詩詞產生器

最後更新於 2021 年 9 月 20 日

什麼是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的位址
   category = json.category;    //分類
   author = json.author;        //作者
   content = json.content;      //內容
   origin = json.origin; //原文
   $(".shi-content").html(content);
   $(".shi-author").html(author);
   $(".shi-category").html(category);
   $(".shi-origin").html(origin);
  });
 }
</script>

因為我們設定了shi-content、shi-author、shi-category、shi-origin這四個元素，因此我們也需要在網頁中插入相對應的呼叫，只需要使用 class=”shi-origin” (以此類推)。

以下為放在<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>

範例效果

demo

See the Pen Random Chinese Poetry Generator by NEVER (@AquaMay) on CodePen.

閱讀量: 44

什麼是jQuery

載入jQuery

隨機詩詞產生器

範例效果

相關文章: