如何通过AJAX获取ACF字段值？WP站点遇400错误求助

一、修复AJAX 400错误的核心问题 #

你的代码AJAX动作名称不匹配，这是导致400错误的直接原因：

• PHP端注册的钩子是wp_ajax_nopriv_get_acf_field_ajax和wp_ajax_get_acf_field_ajax，对应动作名应为get_acf_field_ajax
• 但JS里传的action是my_action，两者不匹配导致WordPress找不到对应处理函数，返回400

修正后的完整代码 #

functions.php

function my_enqueue() {
    wp_enqueue_script( 'ajax-script', get_template_directory_uri() . '/js/global.js', array('jquery') );
    wp_localize_script( 'ajax-script', 'my_ajax_object', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
}
add_action( 'wp_enqueue_scripts', 'my_enqueue' );

// 注册AJAX钩子，动作名需与JS端保持一致
add_action('wp_ajax_nopriv_verify_password', 'verify_user_password');
add_action('wp_ajax_verify_password', 'verify_user_password');

function verify_user_password() {
    // 检查是否传入密码参数
    if (!isset($_POST['user_password'])) {
        wp_send_json_error(array('message' => '缺少密码参数'));
    }

    // 获取ACF选项页存储的密码
    $acf_password = get_field('password', 'option');
    // 服务器端比对密码
    if ($_POST['user_password'] === $acf_password) {
        wp_send_json_success(array('message' => '密码正确'));
    } else {
        wp_send_json_error(array('message' => '密码错误'));
    }
}

global.js

// 密码提交按钮点击事件（需配合弹窗的HTML结构）
$('#password-submit-btn').on('click', function(e) {
    e.preventDefault();
    const userInput = $('#password-input').val().trim();

    $.ajax({
        type: "POST",
        dataType: "json",
        url: my_ajax_object.ajax_url,
        data: { 
            action: 'verify_password', // 与PHP端注册的动作名一致
            user_password: userInput    // 将用户输入的密码传给后端验证
        },
        success: function (response) {
            if (response.success) {
                // 密码正确后的逻辑：显示隐藏区域、关闭弹窗等
                $('.hidden-section').show();
                $('#password-modal').hide();
            } else {
                // 密码错误提示
                $('#password-error').text('密码不正确，请重试');
            }
        },
        error: function(xhr) {
            console.error('请求失败:', xhr.responseText);
        }
    });
});

二、关键优化说明 #

• 禁止前端返回密码：之前的代码直接把ACF密码传回前端，存在严重安全隐患，任何人都能通过控制台获取密码。正确做法是将用户输入传到后端，在服务器端完成比对。
• 使用wp_send_json系列函数：wp_send_json_success和wp_send_json_error会自动设置正确的JSON响应头，同时终止脚本执行，避免多余输出干扰响应。
• 可选权限控制：若只需登录用户验证密码，可删除wp_ajax_nopriv_verify_password钩子，拒绝未登录用户的请求。

三、滚动触发弹窗的基础逻辑（补充） #

如果还未实现滚动触发弹窗，可参考以下代码：

$(window).scroll(function() {
    const hiddenSection = $('.hidden-section');
    const sectionTop = hiddenSection.offset().top;
    const windowBottom = $(window).scrollTop() + $(window).height();

    // 当隐藏区域顶部进入视口时，弹出密码框（需确保弹窗初始为隐藏状态）
    if (windowBottom >= sectionTop && !$('#password-modal').is(':visible')) {
        $('#password-modal').show();
    }
});

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