如何使用 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' );

JavaScript 中的 AJAX 请求（例如， ajax-update-content.js)

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.
      }
    });
  });
});

在服务器端处理 AJAX 请求（例如，在functions.php中）

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 更新 WordPress 页面上的内容。

以上是如何使用 AJAX 异步更新 WordPress 内容？的详细内容。更多信息请关注PHP中文网其他相关文章！