使用 AJAX 實現前端交互與後端通信(POST)

在現代的 Web 開發中，交互式用戶界面和異步數據通信是非常重要的功能。這節課將教您如何在 WordPress 插件或主題中結合使用 jQuery、SweetAlert2 和 AJAX 來實現這些功能。我們將通過一個實際的範例來展示如何實現這些技術的整合。

步驟 1：加載必要的資源

首先，確保在 WordPress 中加載了 jQuery 和 SweetAlert2 這些必要的資源。可以通過 wp_enqueue_script 和 wp_enqueue_style 來實現。

• 資源加載代碼：

  function my_enqueue_scripts() {
      wp_enqueue_script('jquery');
      wp_enqueue_script('sweetalert2', 'https://cdn.jsdelivr.net/npm/sweetalert2@9.10.10/dist/sweetalert2.all.min.js', array(), '9.10.10', true);
  }
  add_action('wp_enqueue_scripts', 'my_enqueue_scripts');
  

步驟 2：在前端處理按鈕點擊事件並顯示 SweetAlert2 彈跳視窗

接下來，我們將使用 jQuery 來獲取按鈕的點擊事件，並顯示一個 SweetAlert2 的彈跳視窗，要求用戶輸入裝置名稱。

• 處理按鈕點擊事件並顯示 SweetAlert2 彈跳視窗：

  $j('#add_btn').click(function() {
      Swal.fire({
          title: "請填寫裝置名稱",
          input: "text",
          inputAttributes: {
              autocapitalize: "off"
          },
          showCancelButton: true,
          confirmButtonText: "建立",
          cancelButtonText: "取消",
          showLoaderOnConfirm: true,
          preConfirm: async (device) => {
              // 在這裡發送 AJAX 請求
          },
          allowOutsideClick: () => !Swal.isLoading()
      })
  });
  

  代碼解釋：

  • Swal.fire({...})：這行代碼使用 SweetAlert2 創建了一個彈跳視窗，要求用戶輸入裝置名稱。
  • preConfirm: async (device) => {...}：當用戶點擊確認按鈕時，preConfirm 函數將被觸發，此時會調用 AJAX 發送請求。

步驟 3：使用 AJAX 發送 POST 請求

在用戶輸入裝置名稱並確認後，我們將使用 AJAX 發送一個 POST 請求到 WordPress 的 REST API 端點。這個請求將包含裝置名稱，並由後端處理。

• 完整的 AJAX 請求代碼：

  $j('#add_btn').click(function() {
      Swal.fire({
          title: "請填寫裝置名稱",
          input: "text",
          inputAttributes: {
              autocapitalize: "off"
          },
          showCancelButton: true,
          confirmButtonText: "建立",
          cancelButtonText: "取消",
          showLoaderOnConfirm: true,
          preConfirm: async (device) => {
              $j.ajax({
                  type: 'POST',
                  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'); ?>',
                      device_name: `${device}`,
                  },
                  error: function(msg) {
                      alert("連線失敗");
                  },
                  success: function(msg) {
                      if (msg.code == 200) {
                          Load_Table(); // 成功後重新加載表格
                      } else {
                          return Swal.showValidationMessage("error");
                      }
                  }
              });
          },
          allowOutsideClick: () => !Swal.isLoading()
      });
  });
  

  代碼解釋：

  • $j.ajax({...})：這段代碼使用 AJAX 發送一個 POST 請求到指定的 REST API 端點。
  • url: '<?php echo get_site_url(); ?>' + '/wp-json/iot/v1/device'：這裡的 URL 指向 WordPress 的 REST API 端點。
  • data: {...}：這裡的 data 包含了 _wpnonce 和 device_name，它們將作為請求的負載數據發送到伺服器。
  • success: function(msg) {...}：當請求成功時，這個回調函數將處理伺服器返回的響應。如果成功，將調用 Load_Table() 函數來更新頁面中的裝置列表。

步驟 4：測試功能

最後，您可以在後台頁面中測試這個功能。點擊 “新增” 按鈕後，應該會彈出 SweetAlert2 視窗，當用戶輸入裝置名稱並點擊 “建立” 時，AJAX 將會發送請求並更新裝置列表。