短代码内Ajax调用POST数据为空问题求助

问题根源 #

1. 脚本加载时机错误：短代码函数在页面内容渲染阶段执行，此时WordPress可能已经完成脚本输出逻辑，导致wp_localize_script传递的变量无法正确注入页面，JS拿不到变量值后POST数据自然为空。
2. 文件路径错误：include_once(plugins_url("ajax/get_price.php", __FILE__))使用plugins_url返回URL而非服务器本地文件路径，不符合PHP文件包含要求（即使服务器允许远程包含，也存在安全风险）。

修正方案 #

1. 调整脚本加载逻辑 #

将脚本注册与入队移到全局钩子wp_enqueue_scripts中，确保脚本在正确时机加载；短代码仅负责将动态变量输出到DOM：

修改plugin.php：

<?php
/**
 *  Plugin Name: Test Plugin
 *  Description: Test
 *  Version: 0.1
 *  Author: Cool name
 *  Author URI: https://www.xyz.de
 */

add_shortcode("oc_product_widget","oc_product_widget");
add_action('wp_enqueue_scripts', 'enqueue_product_ajax_script');

function enqueue_product_ajax_script() {
    // 仅注册入队一次脚本，依赖jQuery保证加载顺序
    wp_enqueue_script(
        'products_price_page_ajax_js',
        plugins_url('js/price_page_ajax.js', __FILE__),
        array('jquery'),
        '0.1',
        true // 放到页脚加载，避免DOM未就绪问题
    );
    // 仅传递固定的ajaxurl，动态变量通过短代码输出到DOM
    wp_localize_script('products_price_page_ajax_js', 'products_price_page_ajax_js', array(
        'ajaxurl' => admin_url('admin-ajax.php'),
    ));
}

function oc_product_widget() {
    $var1 = "var1";
    $var2 = "var2";

    // 用data属性存储动态变量，同时做转义避免XSS风险
    return '<div class="product-widget-container" data-var1="' . esc_attr($var1) . '" data-var2="' . esc_attr($var2) . '"></div>';
}

add_action("wp_ajax_get_price_page", "get_price_page");
add_action("wp_ajax_nopriv_get_price_page", "get_price_page" );

function get_price_page(){
    // 使用本地文件路径包含，替换错误的URL路径
    include_once plugin_dir_path(__FILE__) . "ajax/get_price.php";
    wp_die();
}
?>

2. 修改JS从DOM读取动态变量 #

调整price_page_ajax.js，从短代码输出的DOM元素中获取变量：

(function($) {
    $(document).ready(function () {
        // 获取存储变量的容器
        const $widgetContainer = $('.product-widget-container');
        if (!$widgetContainer.length) return;

        const ajaxurl = products_price_page_ajax_js.ajaxurl;
        const var1 = $widgetContainer.data('var1');
        const var2 = $widgetContainer.data('var2');

        $.ajax({
            url: ajaxurl,
            data: {
                var1: var1,
                var2: var2,
                action:"get_price_page"
            },
            type: 'post'
        }).done(function (responseData) {
            try {
                const resultObject = JSON.parse(responseData);
                // 这里处理返回结果
            } catch (e) {
                console.error('响应解析失败:', e);
            }
        }).fail(function () {
            console.log('AJAX call failed');
        });
    })
})( jQuery );

3. 完善后端变量接收 #

在get_price.php中增加变量存在性检查，避免警告：

<?php
// 检查变量是否存在，消除Undefined array key警告
$var1 = isset($_POST["var1"]) ? $_POST["var1"] : '';
$var2 = isset($_POST["var2"]) ? $_POST["var2"] : '';

// 后续业务逻辑...

// 使用WordPress内置函数输出JSON响应，自动终止脚本
wp_send_json_success([
    'var1' => $var1,
    'var2' => $var2
]);
?>

额外说明 #

• 如果短代码在页面中多次调用，上述方案会为每个实例创建独立容器，可通过遍历容器处理多实例Ajax请求。
• 始终用esc_attr()处理输出到HTML属性的变量，防范XSS攻击。
• 后端使用wp_send_json_success()/wp_send_json_error()可简化JSON响应输出，无需手动调用wp_die()。

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