使用 AJAX 與 REST API 通信並動態顯示數據(GET)

在 Web 開發中，動態數據顯示是非常常見的需求。本節課將教您如何在 WordPress 插件或主題中，使用 jQuery 和 AJAX 與 REST API 進行通信，並將數據動態顯示在使用 Bootstrap 樣式的表格中。

步驟 1：設置 HTML 結構

首先，我們需要在 my_device1.php 文件中創建一個 HTML 表格，用於顯示從 API 獲取的數據。這個表格使用了 Bootstrap 的樣式類，使其更加美觀和響應式。

• HTML 表格結構：

  <table id="table_list" class="table table-hover">
      <thead>
          <tr>
              <th>序號</th>
              <th>裝置名稱</th>
              <th>操作</th>
          </tr>
      </thead>
      <tbody>
      </tbody>
  </table>
  

  代碼解釋：

  • <table>：創建了一個表格，並且使用了 Bootstrap 的 table 和 table-hover 樣式類來美化表格外觀。
  • <thead> 和 <tbody>：<thead> 用於定義表格頭部，而 <tbody> 用於動態填充 API 返回的數據。

步驟 2：使用 AJAX 從 API 獲取數據並顯示在表格中

接下來，我們將編寫一個名為 Load_Table 的自訂函數，使用 AJAX 向 REST API 發送 GET 請求，並將返回的數據動態顯示在表格中。

• Load_Table 函數代碼：

  function Load_Table() {
      $j.ajax({
          type: 'GET',
          headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
          },
          contentType: 'application/x-www-form-urlencoded; charset=utf-8',
          url: '<?php echo get_site_url(); ?>' + '/wp-json/iot/v1/device',
          data: {
              _wpnonce: '<?php echo wp_create_nonce('wp_rest'); ?>'
          },
          error: function() {
              alert("連線失敗");
          },
          success: function(msg) {
              if (msg.code == 200) {
                  $j('#table_list tbody').empty();
                  $j.each(msg.data, function(key, value) {
                      $j('#table_list tbody').append(
                          "<tr>" +
                          "<td>" + value.id + "</td>" +
                          "<td>" + value.device_name + "</td>" +
                          "<td>" +
                          "<button id=\"Iot_btn" + value.id + "\" class=\"m-1 btn btn-warning\" type=\"button\" onclick= \"Send_Iot('" + value.id + "')\" title=\"IoT傳送指令\">IoT傳送</button>" +
                          "<button class=\"m-1 btn btn-danger\" type=\"button\" onclick= \"Delete_device('" + value.id + "')\" title=\"刪除裝置\">刪除</button>" +
                          "</td>" +
                          "</tr>"
                      );
                  });
              } else {
                  alert(msg.message);
              }
          }
      })
  }
  

  代碼解釋：

  • $j.ajax({...})：這段代碼使用 AJAX 發送一個 GET 請求到 REST API 端點，以獲取裝置數據。
  • url: '<?php echo get_site_url(); ?>' + '/wp-json/iot/v1/device'：指定了 API 端點的 URL。
  • success: function(msg) {...}：當請求成功時，這個回調函數將處理伺服器返回的響應數據。
  • $j('#table_list tbody').empty();：清空表格的 tbody 部分，以便插入新的數據。
  • $j.each(msg.data, function(key, value) {...})：遍歷 API 返回的數據，並將每個裝置的信息動態插入到表格中。

步驟 3：處理按鈕的動態行為

在返回的數據中，我們為每個裝置生成了兩個按鈕——”IoT傳送” 和 “刪除”。這些按鈕使用 jQuery 綁定了 onclick 事件，用於發送指令或刪除裝置。

• 按鈕生成代碼解釋：
  • Send_Iot(device_id)：這個函數將被用於發送 IoT 指令。
  • Delete_device(device_id)：這個函數將被用於刪除指定的裝置。

您可以根據需要定義這兩個函數的具體實現邏輯。

步驟 4：在頁面加載時調用 Load_Table 函數

為了在頁面加載時自動顯示裝置列表，我們需要在 document.ready 事件中調用 Load_Table 函數。

• 調用 Load_Table 函數：

  $j(document).ready(function() {
      Load_Table();
  });
  

  這段代碼確保在頁面加載完成後自動調用 Load_Table 函數，從而顯示裝置列表。