使用 jQuery 和 AJAX 刪除資料並發起 DELETE 請求 (DELETE )

在 Web 開發中，刪除資料是常見的需求之一。本節課將教您如何在 WordPress 中使用 jQuery 和 AJAX 發起 DELETE 請求，並通過 REST API 來刪除指定的資料。

步驟 1：新增 DELETE 功能的自訂函數

我們將編寫一個名為 Delete_device 的自訂函數，用於處理刪除操作。這個函數將發送一個 DELETE 請求到指定的 REST API 端點，並根據伺服器的響應結果更新前端表格。

• Delete_device 函數代碼：

  function Delete_device(id) {
      $j.ajax({
          type: 'DELETE',
          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: {
              id: id
          },
          cache: false,
          beforeSend: function(xhr) {
              xhr.setRequestHeader('X-WP-Nonce', '<?php echo wp_create_nonce('wp_rest'); ?>');
          },
          error: function(msg) {
              alert("連線失敗");
          },
          success: function(msg) {
              if (msg.code == 200) {
                  Load_Table();  // 如果刪除成功，重新加載表格
              } else {
                  alert(msg.message);
              }
          }
      });
  }
  

  代碼解釋：

  • type: 'DELETE'：這行代碼指定了 AJAX 請求的類型為 DELETE，用於刪除伺服器上的指定資源。
  • url: '<?php echo get_site_url(); ?>' + '/wp-json/iot/v1/device'：指定 API 端點的 URL，這裡的 URL 指向 REST API 的刪除裝置端點。
  • data: { id: id }：將裝置的 ID 作為數據傳遞給伺服器，以識別需要刪除的資源。
  • beforeSend: function(xhr) {...}：這行代碼在請求發送前設置了 X-WP-Nonce 頭，以驗證請求的合法性。
  • success: function(msg) {...}：當請求成功時，這個回調函數將根據伺服器的響應結果更新前端表格。

步驟 2：綁定 DELETE 按鈕的事件

在上一節中，我們已經在動態生成的表格中為每個裝置添加了刪除按鈕。現在，我們需要將這些按鈕與 Delete_device 函數綁定，這樣當用戶點擊刪除按鈕時，就會發起 DELETE 請求。

• 按鈕生成代碼的回顧：

  $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>"
  );
  

  代碼解釋：

  • onclick= \"Delete_device('" + value.id + "')\"：這行代碼將刪除按鈕與 Delete_device 函數綁定，點擊按鈕時會調用該函數並傳遞裝置的 ID。

步驟 3：測試刪除功能

確保您的 API 端點正確處理 DELETE 請求。當用戶點擊刪除按鈕時，應該會發起一個 DELETE 請求，並刪除對應的裝置。成功後，表格將自動刷新，顯示更新後的裝置列表。

完整代碼示例

• 完整的 Delete_device 函數與表格生成代碼：

  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);
              }
          }
      });
  }
  
  function Delete_device(id) {
      $j.ajax({
          type: 'DELETE',
          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: {
              id: id
          },
          cache: false,
          beforeSend: function(xhr) {
              xhr.setRequestHeader('X-WP-Nonce', '<?php echo wp_create_nonce('wp_rest'); ?>');
          },
          error: function(msg) {
              alert("連線失敗");
          },
          success: function(msg) {
              if (msg.code == 200) {
                  Load_Table();
              } else {
                  alert(msg.message);
              }
          }
      });
  }
  
  $j(document).ready(function() {
      Load_Table();
  });