使用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是由完整版的jQu​​ery庫經過壓縮得來,壓縮後功能與未壓縮的完全一樣,只是將其中的空白字符、註釋、空行等與邏輯無關的內容刪除,並進行一些優化。這個版本一般用於網站引用使用,減小文件體積,降低網站流量,提升訪問速度等。

載入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.

0 0 評分數
Article Rating
訂閱
通知
guest

0 Comments
在線反饋
查看所有評論