如何使用 AJAX 非同步更新 WordPress 內容？

如何在 WordPress 中使用 AJAX 更新內容？

WordPress 提供了多種與頁面互動的方式，而無需重新載入整個頁面。其中之一是使用 AJAX（非同步 JavaScript 和 XML）。它允許網頁和伺服器之間進行非同步資料交換。這對於更新頁面上的內容而不重新加載整個頁面非常有用。

在這種情況下，我們將示範如何在 WordPress 短程式碼中使用 AJAX 更新內容。此方法涉及為短程式碼建立 PHP 函數、JavaScript 中的 AJAX 請求以及在伺服器端處理請求的函數。

步驟：

1. 短程式碼的PHP 函數： 為短程式碼建立一個PHP 函數，並將必要的腳本排入佇列並本地化data.
2. JavaScript 中的AJAX請求： 使用 jQuery 發送 AJAX 請求來檢索內容。
3. 在伺服器端處理 AJAX 請求：處理請求，檢索內容，並將其傳回前端。

程式碼範例：

短程式碼的PHP 函數（例如update_content）

function update_content( $atts ) {
  wp_enqueue_script( 'ajax-update-content', get_template_directory_uri() . '/js/ajax-update-content.js', array( 'jquery' ), '1.0.0', true );
  $content = get_transient( 'content' ); // Simulated content, normally retrieved via AJAX.
  return $content;
}
add_shortcode( 'update_content', 'update_content' );

（例如update_content）

jQuery(document).ready(function($) {
  $('#update-content-button').click(function(e) {
    e.preventDefault();
    $.ajax({
      url: ajaxurl, // AJAX URL defined in WordPress
      type: 'POST',
      data: {
        action: 'update_content_action', // Defined in the server-side function.
        security: '<%= wpApiSettings.nonce %>' // This is provided by WordPress.
      },
      success: function(response) {
        $('#content-container').html(response); // Update the content.
      }
    });
  });
});

>JavaScript 中的AJAX 請求

（例如， ajax-update-content.js)

add_action( 'wp_ajax_update_content_action', 'update_content_action' );
add_action( 'wp_ajax_nopriv_update_content_action', 'update_content_action' ); // Non-logged-in users.

function update_content_action() {
  check_ajax_referer( 'nonce-value', 'security' ); // Security check.
  $content = get_transient( 'content' ); // Simulated content.
  echo $content; // Send the content back to the frontend.
  wp_die();
}

在伺服器端處理AJAX 請求（例如，在functions.php中）透過這些整合這些元件，您現在可以在短代碼中使用AJAX 更新WordPress 頁面上的內容。

以上是如何使用 AJAX 非同步更新 WordPress 內容？的詳細內容。更多資訊請關注PHP中文網其他相關文章！