Wordpress Ajax 触发代码 - JavaScript

在WordPress中，我们可以使用Ajax请求来处理一些任务，比如更新页面内容，验证用户输入等等。这个过程通常需要用到JavaScript代码来触发Ajax请求。

在这里，我们将介绍如何编写一个WordPress Ajax请求的JavaScript代码。

Step 1: 创建 Ajax 调用

首先，我们需要创建一个ajax调用，可以使用jQuery来完成。以下是一个简单的ajax调用示例：

jQuery.ajax({
    url: ajaxurl,
    data: {
        action: 'my_ajax_action',
        data1: 'value1',
        data2: 'value2'
    },
    success: function(response) {
        console.log(response);
    },
    error: function(xhr, status, error) {
        console.log(error);
    }
});

上面的代码中，我们使用jQuery的ajax方法来传递一个对象。URL属性设置了ajax的服务端URL。data属性是将发送到服务端的数据。

success回调函数是当请求成功完成时调用的回调函数。我们可以打印响应以确认ajax请求是否成功。error回调函数是在请求失败时调用的回调函数，用于处理异常情况。

Step 2: 添加 WordPress AJAX 动作

在WordPress中，我们需要在函数文件中为ajax请求添加动作回调函数。以下是一个简单的WordPress ajax动作代码片段：

add_action('wp_ajax_my_ajax_action', 'my_ajax_action_callback');

function my_ajax_action_callback() {
    $data1 = $_POST['data1'];
    $data2 = $_POST['data2'];
  
    // 处理服务端逻辑
    $response = array('success' => true, 'message' => 'Request Successful!');
  
    // 发送JSON格式返回值并退出
    wp_send_json($response);
    wp_die();
}

add_action函数将'wp_ajax_my_ajax_action'注册到wp_ajax_my_ajax_action_callback函数。这意味着当ajax调用使用' my_ajax_action'时，将调用'my_ajax_action_callback'函数。

在my_ajax_action_callback函数中，我们从$_POST中检索数据，处理服务端逻辑，并将响应返回为JSON格式。

Step 3: 触发 Ajax 请求

现在，我们将在JavaScript中触发ajax请求。以下代码展示了如何在按钮点击时触发ajax请求：

jQuery(document).ready(function($) {
    $('#my_btn').on('click', function() {
        jQuery.ajax({
            url: ajaxurl,
            data: {
                action: 'my_ajax_action',
                data1: 'value1',
                data2: 'value2'
            },
            success: function(response) {
                console.log(response);
            },
            error: function(xhr, status, error) {
                console.log(error);
            }
        });
    });
});

代码中，我们绑定一个click事件到ID为'my_btn'的按钮，当按钮被点击时，执行ajax请求。

结论

这就是如何用JavaScript触发WordPress的Ajax请求的介绍。我们需要在JavaScript中创建一个ajax请求，并使用add_action函数在函数文件中为Ajax请求添加动作回调函数。最后，我们通过绑定到点击事件来触发ajax请求。