如何在WordPress中使用AJAX？相关代码文件及引入位置说明

和你之前在CodeIgniter中自定义路由写接口的逻辑不同，WordPress有一套固定的AJAX处理规范，不需要额外引入第三方代码，直接用核心内置功能即可，所有操作建议都在Avada子主题下完成，避免主题更新后自定义代码被覆盖。

前置准备 #

• 优先使用Avada子主题操作，子主题目录默认路径为wp-content/themes/Avada-Child-Theme，如果没有可自行创建，所有自定义代码都放在该目录下即可。
• WordPress核心已经内置完整的AJAX处理逻辑，不需要额外引入外部功能文件。

代码放置位置与实现步骤 #

1. 后端响应逻辑（放在子主题functions.php文件中） #

后端处理代码可直接写在子主题的functions.php里，如果逻辑复杂度高，也可以在子主题下新建独立PHP文件，在functions.php中用require_once()引入即可，无需其他额外配置。
示例代码如下：

// 注册登录用户可调用的AJAX接口
add_action('wp_ajax_your_custom_action', 'your_custom_ajax_handler');
// 注册未登录用户可调用的AJAX接口，不需要可删除该行
add_action('wp_ajax_nopriv_your_custom_action', 'your_custom_ajax_handler');

function your_custom_ajax_handler() {
    // 安全校验必填，避免CSRF攻击
    if (!isset($_POST['nonce']) || !wp_verify_nonce($_POST['nonce'], 'your_custom_nonce')) {
        wp_send_json_error('请求校验失败');
    }
    // 这里写你的业务处理逻辑，和你之前在CodeIgniter中写的处理逻辑一致
    $return_data = [
        'status' => 'ok',
        'content' => '请求处理成功'
    ];
    // 输出JSON格式响应
    wp_send_json_success($return_data);
    // 必须终止后续输出
    exit;
}

2. 前端请求逻辑 #

前端脚本建议放在子主题的js文件夹下（没有可新建），不要直接硬编码到页面模板中，需要先在functions.php中注册加载脚本。
首先在子主题functions.php中添加注册代码：

add_action('wp_enqueue_scripts', 'enqueue_custom_ajax_script');
function enqueue_custom_ajax_script() {
    // 注册自定义JS脚本，依赖jQuery
    wp_enqueue_script('custom-ajax-script', get_stylesheet_directory_uri() . '/js/custom-ajax.js', array('jquery'), '1.0', true);
    // 注入AJAX需要的全局参数到前端JS
    wp_localize_script('custom-ajax-script', 'ajax_config', array(
        'ajax_url' => admin_url('admin-ajax.php'), // WordPress固定AJAX请求地址
        'nonce' => wp_create_nonce('your_custom_nonce') // 安全校验串
    ));
}

然后在子主题js文件夹下新建custom-ajax.js，写AJAX请求逻辑，和你之前的AJAX写法基本一致：

jQuery(document).ready(function($) {
    // 示例：点击按钮触发AJAX请求
    $('#your_trigger_button').click(function() {
        $.ajax({
            url: ajax_config.ajax_url,
            type: 'POST',
            data: {
                action: 'your_custom_action', // 必须和后端注册的action名称完全一致
                nonce: ajax_config.nonce,
                // 其他你需要传递的自定义参数
                param1: 'test_value',
                param2: 'other_value'
            },
            success: function(res) {
                if (res.success) {
                    console.log('请求成功：', res.data);
                    // 处理成功逻辑
                } else {
                    console.log('请求失败：', res.data);
                    // 处理失败逻辑
                }
            },
            error: function(xhr, status, error) {
                console.log('请求异常：', error);
            }
        });
    });
});

注意事项 #

• 不要修改Avada主主题的任何核心文件，所有自定义修改都在子主题下操作
• 前后端的action参数是接口对接的唯一标识，必须完全一致
• 生产环境必须保留nonce安全校验，避免出现安全漏洞
• WordPress AJAX请求地址固定为后台的admin-ajax.php，不需要自行新建独立接口文件

内容的提问来源于stack exchange，提问作者Zartasha Komal