📜  如何在 wordpress 中调用 ajax - PHP (1)

📅  最后修改于: 2023-12-03 15:38:30.053000             🧑  作者: Mango

如何在 WordPress 中调用 AJAX - PHP

AJAX 指的是异步 JavaScript 和 XML,主要是用来实现不刷新页面的异步请求,让网站更加流畅。

在 WordPress 中,我们可以使用 wp_ajax_ 或者 wp_ajax_nopriv_ 这两个函数来处理 AJAX 请求。其中,wp_ajax_ 用来处理已登录用户的请求,而 wp_ajax_nopriv_ 用来处理未登录用户的请求。

步骤

下面我们详细介绍一下如何在 WordPress 中调用 AJAX - PHP。

第一步:为 JavaScript 注册 AJAX 功能

首先,我们需要为 JavaScript 注册 AJAX 功能,让它能够和 PHP 后台交换数据。下面是一个简单的示例代码:

jQuery(document).ready(function($) {
  var data = {
    'action': 'my_action',
    'name': 'John',
    'type': 'user'
  };

  $.post(ajaxurl, data, function(response) {
    console.log('Got this from the server: ' + response);
  });
});

在上面的代码中,$post() 方法用来向 PHP 后台发送数据请求,其中 ajaxurl 是 WordPress 自带的一个全局变量,它指向 WordPress 的现有的 ajax-admin.php 文件。

data 对象是向后台发送的数据,注意 'action': 'my_action' 这个键值,它将会在后台被用来判断这个 AJAX 请求的类型。

第二步:PHP 后台处理 AJAX 请求

通过前台的 AJAX 请求后,我们需要后台对这个请求进行处理。以下是一个基本的 AJAX 处理器示例。

add_action( 'wp_ajax_my_action', 'my_action_callback' );
add_action( 'wp_ajax_nopriv_my_action', 'my_action_callback' );

function my_action_callback() {
    global $wpdb;
    
    $name = $_POST['name'];
    $type = $_POST['type'];

    if ($type == 'user') {
        // Do something
    } elseif ($type == 'post') {
        // Do something else
    }

    wp_die(); // 防止代码长时间执行卡住
}

在上面的代码中,add_action() 函数用来将我们的 my_action_callback 函数注册成一个处理器,其中第一个参数是用来判断这个 AJAX 请求的类型。

$_POST[] 对象是用来获取前台传递过来的数据,我们可以使用这些数据来执行不同的操作。

最后一行代码 wp_die() 是用来关闭 AJAX 请求并退出 WordPress 程序。

第三步:将数据返回到前台

最后,我们需要将数据传递回前台。下面是一个简单的 PHP 代码示例:

function my_action_callback() {
  // 处理代码

  $response = json_encode(array('message' => '我是一个字符串'));
  echo $response;
  wp_die(); // 关闭 AJAX 请求并退出 WordPress 程序
}

在上面的代码中,我们将一个字符串 '我是一个字符串' 用 json_encode() 函数转换成 JSON 格式,然后将它通过 echo 输出到前台。

注意:必须在最后调用 wp_die() 函数来结束 AJAX 调用。

结论

上述代码演示了如何在 WordPress 中使用 AJAX 和 PHP 来处理网站上的异步请求。应该注意的几点是使用的 AJAX 请求必须在 $(document).ready() 函数中执行,同时需要将数据回传到前台。