WordPress插件开发：Javascript为何从PHP获取到空数组？

咱们先来搞定你遇到的dataObj为空的问题，再聊聊你的开发思路是否靠谱。

一、为什么dataObj是空的？ #

问题出在钩子的执行时机上：

• wp_enqueue_scripts钩子是在WordPress加载主题模板之前触发的，这时候你的短代码函数penalty_calculator还没运行呢，所以全局变量$my_data_array还是空数组，wp_localize_script自然传递了空对象。

二、修复方案 #

有两种简单的修复方式，选哪种取决于你的需求：

方案1：直接在脚本加载函数里赋值数据 #

既然插件路径是固定的，没必要依赖短代码的执行，直接在my_styles_scripts里定义数据就行：

add_shortcode('penalty', 'penalty_calculator');
add_action( 'wp_enqueue_scripts', 'my_styles_scripts' );

function my_styles_scripts(){
    // 直接在这里定义插件路径，不需要全局数组
    $plugin_data = [
        'path' => plugin_dir_url(__FILE__),
        'ajaxurl' => admin_url('admin-ajax.php') // 后续Ajax会用到，提前加上
    ];
    
    wp_register_script( 'my-js', plugins_url( 'js/my_functions.js', __FILE__ ), array('jquery'), '', true );
    wp_enqueue_script( 'my-js' );
    wp_localize_script( 'my-js', 'dataObj', $plugin_data );
}

function penalty_calculator(){
    ?>
    <form action="" method="post" class="income_tax_calculator">
        <?php wp_nonce_field('calculate_penalty_action', 'calculate_penalty_nonce'); ?> <!-- 给nonce加标识，更安全 -->
        <p>
            <label for="income_tax">How many charges are there?</label>
            <input type="text" name="income_tax" id="income_tax">
        </p>
        <p>
            <input type="submit" name="calculate_income_tax" id="calculate_income_tax" value="Calculate">
        </p>
    </form>
    <?php
}

方案2：仅在短代码渲染时加载脚本 #

如果你的插件只有在短代码被调用时才需要加载脚本，可以把脚本加载逻辑移到短代码函数里：

add_shortcode('penalty', 'penalty_calculator');

function penalty_calculator(){
    $plugin_data = [
        'path' => plugin_dir_url(__FILE__),
        'ajaxurl' => admin_url('admin-ajax.php')
    ];
    
    // 检查脚本是否已加载，避免重复加载
    if(!wp_script_is('my-js', 'enqueued')){
        wp_enqueue_script( 'my-js', plugins_url( 'js/my_functions.js', __FILE__ ), array('jquery'), '', true );
        wp_localize_script( 'my-js', 'dataObj', $plugin_data );
    }
    ?>
    <form action="" method="post" class="income_tax_calculator">
        <?php wp_nonce_field('calculate_penalty_action', 'calculate_penalty_nonce'); ?>
        <p>
            <label for="income_tax">How many charges are there?</label>
            <input type="text" name="income_tax" id="income_tax">
        </p>
        <p>
            <input type="submit" name="calculate_income_tax" id="calculate_income_tax" value="Calculate">
        </p>
    </form>
    <?php
}

修改后，刷新页面再看控制台，dataObj就能正确显示插件路径了。

三、你的开发思路是否正确？ #

整体思路是对的，完全符合WordPress插件开发的最佳实践：

• 用Ajax实现无刷新操作：提升用户体验，这是现代插件的标配做法。
• 使用wp_enqueue_script加载脚本：避免直接输出内联脚本，符合WordPress的资源管理规范。
• 使用wp_localize_script传递PHP数据：这是WordPress官方推荐的PHP与JS通信方式，比直接输出全局变量更安全规范。

不过还有几个可以优化的地方，让你的插件更健壮：

1. 安全加固Nonce：给wp_nonce_field加上明确的action和name，验证请求合法性，防止CSRF攻击。
2. 使用WordPress原生Ajax API：不要直接请求calculate.php，而是用WordPress的admin-ajax.php，配合wp_ajax_*钩子处理请求，这样能利用WordPress的权限验证和环境。
3. 前后端数据验证：前端要校验输入格式（比如是否为数字），后端也要二次验证，避免恶意输入。

给你补充一个完整的Ajax请求示例：

PHP后端处理逻辑 #

// 处理登录用户的Ajax请求
add_action('wp_ajax_calculate_penalty', 'calculate_penalty_callback');
// 处理未登录用户的Ajax请求（如果允许游客使用的话）
add_action('wp_ajax_nopriv_calculate_penalty', 'calculate_penalty_callback');

function calculate_penalty_callback(){
    // 验证Nonce
    if(!isset($_POST['nonce']) || !wp_verify_nonce($_POST['nonce'], 'calculate_penalty_action')){
        wp_send_json_error('Invalid request');
    }
    
    // 验证输入
    if(!isset($_POST['income_tax']) || !is_numeric($_POST['income_tax'])){
        wp_send_json_error('Please enter a valid number');
    }
    
    $charge_count = intval($_POST['income_tax']);
    // 这里替换成你的所得税计算逻辑
    $calculation_result = $charge_count * 15;
    
    wp_send_json_success(['result' => $calculation_result]);
}

JS前端请求代码 #

jQuery(document).ready(function($){
    console.log(dataObj); // 现在能看到完整的data对象了
    $("#calculate_income_tax").click(function(event){
        event.preventDefault();
        var income_tax = $("#income_tax").val();
        var nonce = $('input[name="calculate_penalty_nonce"]').val();
        
        $.ajax({
            url: dataObj.ajaxurl,
            type: 'POST',
            data: {
                action: 'calculate_penalty', // 对应PHP钩子的后缀
                nonce: nonce,
                income_tax: income_tax
            },
            success: function(response){
                if(response.success){
                    // 把结果显示到页面上，比如添加一个<p>标签
                    $('.income_tax_calculator').append('<p class="result">Calculation Result: $' + response.data.result + '</p>');
                } else {
                    alert('Error: ' + response.data);
                }
            },
            error: function(){
                alert('Oops, something went wrong.');
            }
        });
    });
});

这样你的插件就更规范、安全了。

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