WordPress中AJAX修改PHP Cookie后无需刷新显示新值的问题

核心问题原因 #

PHP 属于服务器端脚本，页面加载时就已生成 <?php echo "Value is: " . $_COOKIE['country']; ?> 的静态内容。AJAX 请求完成后，服务器端的 $_COOKIE 变量不会自动同步到已加载的页面 HTML 中，必须通过 JavaScript 手动更新页面上的显示内容。

步骤1：修改后端 AJAX 函数，返回新的国家代码 #

在 functions.php 中，让函数返回设置好的国家代码，供前端直接使用：

function country_change_ajax_function() {
    $country_code_value = $_POST['country_code_value'];
    setcookie('country', $country_code_value, time() + (86400 * 30), '/');
    // 返回新的国家代码给前端
    echo $country_code_value;
    exit;
}
add_action('wp_ajax_country_change_ajax_function', 'country_change_ajax_function');
add_action('wp_ajax_nopriv_country_change_ajax_function', 'country_change_ajax_function');

步骤2：更新前端 JS，在 AJAX 成功后修改页面显示 #

首先给显示国家代码的元素添加标识，方便 JS 定位：

<!-- 给元素添加 id 以便快速定位 -->
<p id="country-display"><?php echo "Value is: " . $_COOKIE['country']; ?></p>

然后修改 JS 的 success 回调，更新页面内容，同时可同步更新客户端 Cookie（若其他 JS 逻辑需要读取该 Cookie）：

$('.single-country-select').on("change", function (e) {
    var country_code_value = $(this).val(); // 用$(this)替代重复选择器，提升效率
    var sendData = {
        action: 'country_change_ajax_function',
        country_code_value: country_code_value
    };

    $.ajax({
        url: ajaxadminurl.ajaxurl,
        type: 'POST',
        data: sendData,
        dataType: 'text', // 返回纯文本，改为text更合适
        cache: false,
        success: function(data) {
            // 更新页面上的国家代码显示
            $('#country-display').text("Value is: " + data);
            // 可选：同步更新客户端Cookie（若其他JS需要读取）
            document.cookie = "country=" + data + "; expires=" + new Date(Date.now() + 86400 * 30 * 1000).toUTCString() + "; path=/";
        },
        error: function(xhr, status, error) {
            console.error("AJAX请求出错: " + error);
            // 可选：提示用户操作失败
        }
    });
});

额外优化建议 #

• 确保 getRealIpAddr() 函数已正确定义，避免自动设置 Cookie 的代码报错。
• 若下拉框仅需绑定一次事件，可考虑用 $(document).on('change', '.single-country-select', function(){...}) 提升兼容性。

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