WordPress搭配snippets与Elementor时AJAX返回结果异常如何解决？

问题原因梳理 #

1. 使用wp.ajaxurl返回当前页面HTML #

WordPress默认仅在后台管理页面自动注入wp.ajaxurl全局变量，前台页面默认不存在该变量，调用未定义变量作为请求地址时，会默认请求当前页面URL，因此返回当前页面完整HTML代码。

2. 直接请求/wp-admin/admin-ajax.php返回0 #

WordPress的AJAX回调逻辑要求直接输出响应内容而非return返回：你的回调函数中使用return返回结果，返回内容不会被输出到响应中，程序执行完回调后会走到WordPress默认逻辑输出0，这是WordPress AJAX接口的典型报错特征。

修复方案 #

第一步：修改PHP端代码（写入Snippets插件即可） #

// 前台注入ajaxurl全局变量
add_action( 'wp_enqueue_scripts', 'inject_ajaxurl_to_front' );
function inject_ajaxurl_to_front() {
    wp_localize_script( 'jquery', 'wp', array(
        'ajaxurl' => admin_url( 'admin-ajax.php' )
    ));
}

// AJAX请求处理逻辑
add_action( 'wp_ajax_get_slug_from_id', 'get_slug_from_id' );
add_action( 'wp_ajax_nopriv_get_slug_from_id', 'get_slug_from_id' );
function get_slug_from_id() {
    // 输入合法性校验
    if ( empty( $_POST['target_url'] ) ) {
        echo 0;
        die();
    }
    // 安全过滤输入参数
    $target_url = esc_url_raw( $_POST['target_url'] );
    // 直接输出结果，不可用return
    echo url_to_postid( $target_url ); 
    die();
}

第二步：修改前端JS代码 #

这里同步做了逻辑优化：url_to_postid本身支持传入完整URL获取文章ID，不需要额外正则提取slug，避免永久链接结构变动导致逻辑失效。

<script>
    (function($){
        
        $(window).on('load',function(){
        
            $('.ee-calendar-skin--default .ee-calendar__day__event__name a').each(function(){
                // 直接取完整链接即可，无需提取slug
                let targetUrl = $(this).attr('href');
                if (!targetUrl) return;
                
                $.post(
                    wp.ajaxurl, 
                    {
                        'action': 'get_slug_from_id',
                        'target_url': targetUrl
                    }, 
                    function(response) {
                        console.log(response);
                    }
                );
                
            });
        
        });
        
    })(jQuery);
</script>

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