WordPress Ajax调用返回当前页面完整HTML问题求助

核心问题1：Ajax URL变量名不匹配 #

你在wp_localize_script中定义的URL键是ajax_url，但JS代码里调用的是my_ajax_object.ajaxurl（少了下划线），导致请求地址错误，最终请求到当前结账页面，返回完整HTML。

核心问题2：处理函数冗余代码干扰响应 #

wp_send_json_success()函数会自动输出JSON格式数据并终止程序，不需要额外的echo 'ok'和die();，冗余代码可能破坏响应格式。

优化后的完整代码 #

1. 修正脚本入队与本地化代码 #

add_action( 'wp_enqueue_scripts', 'theme_scripts' );
function theme_scripts() {
    wp_enqueue_script( 'theme_scripts', get_stylesheet_directory_uri() . '/assets/js/theme.js', array('jquery'), '1.0.0', true );
    // 统一键名，同时添加nonce防CSRF
    wp_localize_script( 'theme_scripts', 'my_ajax_object', array(
        'ajax_url' => admin_url( 'admin-ajax.php' ),
        'ajax_nonce' => wp_create_nonce('example_ajax_nonce')
    ) );
}

2. 修正触发Ajax的代码 #

add_action('wp_footer','my_custom_ajax');
function my_custom_ajax(){
?>
<script>
(function($){
    $( document.body ).on( 'updated_checkout', function(){
        $.ajax({
            url: my_ajax_object.ajax_url, // 修正变量名
            type: 'POST', // 明确请求方法
            data: {
                'action':'example_ajax_request',
                '_nonce': my_ajax_object.ajax_nonce // 加入nonce验证
            },
            success:function(data) {
                console.log(data); // 正常返回{"success":true,"data":"It works"}
            },
            error: function(errorThrown){
                console.log(errorThrown);
            }
        });
    });
})(jQuery);
</script>
<?php
}

3. 修正Ajax处理函数 #

function example_ajax_request() {
    // 验证nonce，提升安全性
    check_ajax_referer('example_ajax_nonce', '_nonce');
    
    // 直接使用wp_send_json_success，无需额外输出或终止
    wp_send_json_success( 'It works' );
}

add_action( 'wp_ajax_example_ajax_request', 'example_ajax_request' );
add_action( 'wp_ajax_nopriv_example_ajax_request', 'example_ajax_request' );

额外排查建议 #

如果仍有问题，打开浏览器开发者工具的网络面板，查看Ajax请求的状态码和实际请求地址，确认是否正确指向wp-admin/admin-ajax.php。

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