WordPress插件中点击按钮触发AJAX异常：返回内容包含JS代码问题排查

首先，你遇到的核心问题是触发AJAX的JS代码被错误地输出到了AJAX请求的响应内容里，导致返回结果同时包含JS代码和预期的1244。

为什么会出现这个问题？ #

你移除admin_footer钩子后，把那段<script>代码直接裸写在了插件的PHP文件中。当WordPress处理AJAX请求（通过admin-ajax.php）时，会加载整个插件文件，这段未被任何页面钩子包裹的JS代码会被直接输出到响应流里，然后才执行你的my_action函数输出1244，最终两者混在一起返回给前端。

另外，你在aaa()函数里嵌套jQuery(document).ready()是多余的——当用户点击按钮时，页面早已加载完成，不需要再等待DOM就绪。

方案一：修正内联脚本的加载方式 #

我们可以保留admin_footer钩子来加载内联JS，但把代码改成点击触发的形式：

步骤1：正确加载内联JS #

// 把JS代码挂到admin_footer钩子，确保只在后台页面前端输出
add_action( 'admin_footer', 'my_action_javascript' );
function my_action_javascript() { ?>
<script type="text/javascript" >
function aaa(){
    var data = {
        'action': 'my_action',
        'whatever': 1234
    };
    // 直接发送AJAX请求即可，不需要再包ready
    jQuery.post(ajaxurl, data, function(response) {
        alert('Got this from the server: ' + response);
    });
}
</script>
<?php }

步骤2：输出触发按钮 #

在你的Hello World输出函数中正常添加按钮：

function my_hello_world_output() {
    echo '<button onclick="aaa()">触发AJAX</button>';
    echo '<p>Hello World!</p>';
}
// 记得把这个函数挂到合适的后台钩子，比如admin_menu或者自定义页面钩子

步骤3：保留AJAX处理逻辑 #

这部分代码不需要修改：

add_action( 'wp_ajax_my_action', 'my_action' );
function my_action() {
    global $wpdb;
    $whatever = intval( $_POST['whatever'] );
    $whatever += 10;
    echo $whatever;
    wp_die(); // 必须添加，确保返回正确的响应
}

方案二：更规范的WordPress做法（推荐） #

按照WordPress的最佳实践，我们应该把JS代码单独放在文件中，通过wp_enqueue_script加载，而不是用内联脚本：

步骤1：创建独立的JS文件 #

在插件目录下新建js/my-plugin-ajax.js，内容如下：

jQuery(document).ready(function($) {
    // 通过ID绑定点击事件，避免全局函数污染
    $('#my-ajax-trigger').on('click', function() {
        var data = {
            'action': 'my_action',
            'whatever': 1234
        };
        $.post(ajaxurl, data, function(response) {
            alert('Got this from the server: ' + response);
        });
    });
});

步骤2：注册并加载脚本 #

在插件主PHP文件中添加：

add_action('admin_enqueue_scripts', 'my_enqueue_ajax_assets');
function my_enqueue_ajax_assets() {
    // 注册并加载JS文件，依赖jQuery
    wp_enqueue_script(
        'my-plugin-ajax',
        plugin_dir_url(__FILE__) . 'js/my-plugin-ajax.js',
        array('jquery'),
        '1.0',
        true // 放在页面底部加载
    );
}

步骤3：输出带ID的按钮 #

function my_hello_world_output() {
    echo '<button id="my-ajax-trigger">触发AJAX</button>';
    echo '<p>Hello World!</p>';
}

步骤4：保留AJAX处理逻辑 #

和方案一的AJAX处理代码完全一致即可。

这样修改后，点击按钮就能正常触发AJAX，返回的内容只会是预期的1244，不会再混入JS代码了。

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