Semantic UI 的 API ，也就是應用介面， 提供了一種簡單的使用 Ajax 對服務端發送請求的方法。你可以去定義一些動作，這些動作對應服務端的地址，然後去把這些動作綁定給頁面上的元素，比如一個按鈕，一個文字框，或者一個表單，當特定的事件發生以後，API 會根據動作裡指定的地址，向服務端發出請求，服務端收到請求，會作出響應，為我們的前端應用返回請求的資料，這樣你就可以去使用這些請求回來的資料，比如把它們顯示在頁面上。
下面我們學一下怎麼去使用這個 Semantic UI 裡的 API 。先要做些準備。
服務端
我們可以使用各種服務端，比如 WordPress ，Drupal ，Laravel ，這些都可以作為服務端向前端應用提供資料，可以處理各種前端應用的請求。另外，有些專門的服務端服務，比如 Firebase ，這個公司被 Google 買了。
在服務端上就是定義了一些特定的地址，通過用不同的方法去請求這些地址，服務端可以去處理請求，並且根據請求的方法與地址作為不同的反應，比如可能返回一些文章內容給前端應用，或者把前端應用提供的資料存放區在資料庫裡等等。
在 WordPress 上可以使用 WP API 這個外掛程式去為前端應用提供一些可以處理請求的端點，也就是地址。這個外掛程式在以後版本的 WordPress 上整合在核心裡，也就是以後你可能就不需要單獨去安裝這個外掛程式了，WordPress 直接包含了這個外掛程式提供的功能。
在 Drupal 7 上，你可以安裝 Services 模組。Drupal 8 核心會提供這個功能。使用 Laravel 架構的話，你可以定義 Resources 類型的控制器去處理請求，然後設定一下響應回來的資料格式為 JSON 就行了。
準備
下面，你可以在本地準備一個安裝好的 WordPress 網站，在上面添加點內容，然後安裝 WP API 1.x 外掛程式，再安裝一個 Basic Auth 外掛程式，這個外掛程式提供了基本的身分識別驗證的功能，因為有些請求需要通過身分識別驗證才有許可權去做。
WP API 1.x
https://wordpress.org/plugins/json-rest-api/
Basic Auth
https://github.com/WP-API/Basic-Auth
Allow-Control-Allow-Origin: *
瀏覽器有同域限制，就是你發出請求的地方，要跟你請求的地址在同域，也就是需要同樣的協議，同樣的主機名稱，同樣的連接埠。英文是 Same-origin policy 。為了簡單的測試，我們可以為 Chrome 瀏覽器安裝一個擴充：Allow-Control-Allow-Origin: * ，這樣你就不受這個同域的限制了。
地址：http://t.im/qlei
Postman
Postman 也是一個 Chrome 瀏覽器的擴充，你可以使用它直接向服務端發出請求，然後直接預覽請求回來的資料。你可以在請求裡添加參數，可以配置身分識別驗證等等。
地址：http://t.im/qlen
端點
服務端提供的可以請求的地址叫做 endpoint ，可以翻譯成端點。比如 WP API 提供了一些端點， wp-json/posts 就是一個跟文章內容相關的端點，請求這個地址的時候會返迴文章列表內容，你也可以在請求端點的時候添加參數，比如 wp-json/posts/117 ，意思就是我要得到的是 識別碼是 117 的這個文章內容。
你還可以使用不同的方法去請求，一般預設就是 GET 方法，意思是去得到資料，如果你想把資料提交給伺服器，比如想去發布一個新的文章內容，你需要使用 POST 方法去發生請求，請求的地址可以是 wp-json/posts 。另外你也可以使用 PUT 方法去發送編輯內容的請求，使用 DELETE 方法請求刪除內容。
實施
目的是學會使用 Semantic UI 的 API 對服務端發出請求，學會利用服務端返回來的內容。
使用 Postman 測試一下
先用 Postman 這個工具去測試一下，開啟以後請求 WP API 提供的一個端點的地址，比如 posts ，這個地址就是你的 WordPress 網站的地址，加上 wp-json/posts ，我這裡就是：http://web-stack.wordpress.ninghao.local/wp-json/posts ，請求的方法選擇 GET，下面是請求回來的結果：
服務端返回來的資料的格式用的是 JSON，它有點像 JavaScript 裡的對象。你可以把這個結果想成是一個數組，裡面有一些項目，這些項目就是返回來的結果，每個項目都是一個對象，在這個對象裡有一些屬性，使用這些屬性你可以得到對應的值，這些東西就是網站裡的文章內容，比如文章的 識別碼，標題，本文，作者，分類等等。
使用 Semantic UI 的 API 發生請求
先準備一下 HTML ，看起來像下面這樣：
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Semantic UI</title> <link rel="stylesheet" href="http://ninghao.net/semantic/dist/semantic.min.css"></head><body> <div class="ui container" style="padding:50px"> <button class="ui button">執行</button> </div> <script src="http://ninghao.net/javascript/jquery.min.js"></script> <script src="http://ninghao.net/semantic/dist/semantic.min.js"></script></body></html>
在上面的 HTML 文檔裡有一個 執行 按鈕，下面我們可以給這個按鈕去綁定一個 API 動作，當點擊這個按鈕的時候可以去執行請求。
定義動作
API 的動作就是一個名字對應一個請求的地址，動作裡可以包含必填或者可選的參數。這些動作的名字可以使用一些短語，比如 save profile ，update post 等等。這些動作可以放在 $.fn.api.settings.api 這裡儲存，然後我們可以把動作綁定到頁面上的某個元素上，比如一個按鈕，或者一個表單等等。
下面去定義一個叫 posts 的動作：
<script> $.fn.api.settings.api = { 'posts': 'http://web-stack.wordpress.ninghao.local/wp-json/posts' }; </script>
綁定動作
上面定義了一個叫 posts 的動作，下面把這個動作綁定到頁面上的 執行 這個按鈕上：
$('.ui.button').api({ action: 'posts' });
我們可以使用 jQuery 找到頁面上的要綁定 API 動作的元素，這裡就是 .ui.button ，然後使用 api 方法，給這個方法一個對象參數，在這個對象裡，添加一個 action 屬性，這個屬性的值就是這個元素要使用的 API 的動作，這裡就是前面我們定義的 posts 這個動作。
現在點擊 執行 這個按鈕的時候，就會去請求在 posts 動作裡指定的那個地址。開啟瀏覽器的控制台，我們可以看到一些東西。
在控制台上第一塊內容是請求的流程：
Looking up url for action - 尋找動作的地址
Querying URL - 查詢地址
Sending request - 發送請求
第二塊內容，顯示 Successful API Response ，成功得到響應，在響應回來的東西裡面，你可以找到請求服務端得到的內容，這裡就是一些文章內容。
利用服務端響應回來的資料
請求成功以後會執行 onSuccess 這個回呼函數，你可以在個函數裡去處理服務端響應回來的資料，比如把它們顯示在頁面上。這裡我們可以先簡單的把響應回來的文章內容的標題顯示在控制台上看一下：
$('.ui.button').api({ action: 'posts', onSuccess: function (response) { response.map(function (post) { console.log(post.title); }); } });
在元素的 api 這個方法的設定物件裡，添加一個 onSuccess 屬性，屬性的值是一個函數，接受一個參數叫 response，這個 response 就是服務端響應回來的資料，它是一個數組，所以我們可以使用 map 方法去迴圈的處理一下這個數組，把每個結果裡的 title 屬性輸出到控制台上。
動作裡的參數
在定義 API 動作的時候，我們可以在動作裡面添加一些參數，比如你可能想要得到某個具體的文章內容，而不是一個文章的列表。這就需要使用文章內容的 ID 作為一個參數，這樣服務端會返回某個具體的文章內容。參數有兩種，一種是必填的，也就是在請求的時候你必須要指定這個參數的值，另一種是選擇性參數，請求的時候可以加上參數，也可以不加。
必填參數：{參數名}
選擇性參數：{/參數名}
區別就是，選擇性參數的參數名前面要加上一個斜線。下面我們給 posts 這個動作添加一個叫 id 的參數：
$.fn.api.settings.api = { 'posts': 'http://web-stack.wordpress.ninghao.local/wp-json/posts/{/id}' };
上面我們把 id 這個參數定義成了一個可選的參數。
設定參數的值
在向服務端發出請求的時候，你可以指定 api 動作裡的參數的值。有兩種方法，一種是使用 data 屬性的方法，另一種是使用 JavaScript 去指定參數的值。
使用 data 屬性設定參數的值
使用 data 屬性的方法，就是你可以在元素的上面添加一個 data 開頭的屬性，後面加上參數的名字，還有對應的值，比如我要為 id 這個參數設定一個值，使用 data 屬性去設定可以這樣：
<button class="ui button" data-id="119">執行</button>
元素上的 data-id 這個屬性的值，就是為 api 動作裡的 id 這個參數設定的值，這裡就是 119 ，這樣服務端返回的結果就會是 id 號是 119 的這個文章內容。因為加了參數以後，返回來的結果就不是一個數組了，所以我們需要改造一下 onSuccess 。
onSuccess: function(response) { if ($.isArray(response)) { response.map(function (post) { console.log(post.title); }); } else { console.log('ID：' + response.ID + ' ' + response.title); } },
去判斷一下服務端響應回來的資料，是不是一個數組，如果是就迴圈的在控制台上輸出結果裡的 title 屬性的值，如果不是，就直接輸出結果的 id 還有 title 屬性的值。
使用 JavaScript 設定參數的值
設定參數的值還可以使用 JavaScript 的方法，先去掉在元素上的 data-id 這個屬性。然後去改造一下 api 方法裡的設定物件：
$('.ui.button').api({ action: 'posts', urlData: { id: 119 }, onSuccess: function(response) { if ($.isArray(response)) { response.map(function (post) { console.log(post.title); }); } else { console.log('ID：' + response.ID + ' ' + response.title); } }, });
上面我們在 api 的設定物件裡添加了一個 urlData 屬性，這個屬性的值是一個對象，在這個對象裡，可以設定一下 api 的參數，還有對應的值。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
