wordpress的前后台数据交换ajax

ajax是个耳熟能详的词儿，但因为有点儿复杂，博主一直是规避学习的，今天刚好碰到一个前台jquery向wp后台申请数据的问题。躲不过，那就慢慢调试吧。

钩子

wp的ajax还区分了用户，对于不同的用户（登录与否）采用不同的钩子，不过这里只是请求一段与用户登录状态无关的数据，所以执行的逻辑是一样的，有访问就发送就完事了。

function my_custom_ajax_handler() {
    // 创建一个示例数组
    $data = array(
        'name' => 'John Doe',
        'age'  => 30,
        'city' => 'New York'
    );

    // 将数组转换为 JSON 格式
    wp_send_json($data);
}

// 为登录用户和非登录用户分别注册 AJAX 处理函数
add_action('wp_ajax_my_custom_ajax', 'my_custom_ajax_handler');
add_action('wp_ajax_nopriv_my_custom_ajax', 'my_custom_ajax_handler');

jquery请求

需要注意的是参数里的ajaxurl，这个全局变量是需要在wordpress里定义的，该变量指向类似如下的地址：

https://站点名/wp-admin/admin-ajax.php

因为很多教程转手几道，中间漏掉了一些关键信息，导致博主调了半天，jquery始终报错。事实上，这个地址也可以利用jquery获取当前主页后自行拼接，博主调试的时候始终不过，干脆就直接自己组装了。

jQuery(document).ready(function($) {
    // 发起 AJAX 请求
    $.ajax({
        url: ajaxurl, // WordPress 提供的全局变量，指向 admin-ajax.php
        type: 'POST',
        data: {
            action: 'my_custom_ajax' // 与你在 PHP 中定义的动作名称一致
        },
        success: function(response) {
            // 处理返回的 JSON 数据
            console.log(response);
            alert('Name: ' + response.name + ', Age: ' + response.age + ', City: ' + response.city);
        },
        error: function(error) {
            console.log(error);
        }
    });
});

ajaxurl

在wordpress里指定的话可以参考下面的方式：

function my_theme_scripts() {
    // 加载 jQuery
    wp_enqueue_script('jquery');

    // 加载自定义脚本
    wp_enqueue_script('my-custom-script', get_template_directory_uri() . '/js/script.js', array('jquery'), null, true);

    // 将 ajaxurl 变量传递给前端
    wp_localize_script('my-custom-script', 'ajax_object', array('ajaxurl' => admin_url('admin-ajax.php')));
}
add_action('wp_enqueue_scripts', 'my_theme_scripts');

跟博主一样暂时不准备通过后台挂钩子的，也可以利用如下语句来拼接：

url: window.location.href + '/wp-admin/admin-ajax.php',

这个语句在主页的时候能正常起作用，但到了其他页面就出错了，最终修改版本如下：

url: window.location.protocol+'//'+window.location.host+'/wp-admin/admin-ajax.php',