WordPress场景下如何通过JavaScript获取页面URL并传递至PHP以实现动态分类数据获取

首先，你遇到的404错误核心原因是直接请求了主题模板文件——WordPress的模板文件不能通过URL直接访问，必须使用官方提供的Ajax端点admin-ajax.php（也就是你已经注册的get_case动作对应的接口）。下面是完整的分步修改方案：

1. 优化前端：安全传递页面标识到Ajax接口 #

我们不需要传递完整URL，直接获取当前页面的分类slug（比如page-a/page-b）更高效可靠。推荐用WordPress内置的wp_localize_script把页面标识注入到JS中，避免手动解析URL出错。

步骤1.1：在functions.php中注入页面数据 #

添加代码将当前分类的slug和Ajax必要参数传递到前端：

function dk_case_enqueue_scripts() {
    // 注册自定义JS（推荐单独文件，也可直接在footer输出）
    wp_enqueue_script( 'dk-case-ajax', get_template_directory_uri() . '/js/case-ajax.js', ['jquery'], '1.0', true );

    // 获取当前case_category分类的slug
    $current_term = get_queried_object();
    $case_slug = '';
    if ( $current_term instanceof WP_Term && $current_term->taxonomy === 'case_category' ) {
        $case_slug = $current_term->slug;
    }

    // 传递关键数据到JS
    wp_localize_script( 'dk-case-ajax', 'DKCase', [
        'ajax_url' => admin_url( 'admin-ajax.php' ),
        'nonce' => wp_create_nonce( 'dk_case_secure' ),
        'current_slug' => $case_slug
    ] );
}
add_action( 'wp_enqueue_scripts', 'dk_case_enqueue_scripts' );

步骤1.2：编写前端Ajax请求（js/case-ajax.js） #

创建JS文件发起请求并渲染数据：

jQuery(document).ready(function($) {
    // 确保有有效的分类slug再发起请求
    if (typeof DKCase !== 'undefined' && DKCase.current_slug) {
        $.ajax({
            type: 'POST',
            url: DKCase.ajax_url,
            data: {
                action: 'get_case', // 对应后端注册的动作名
                nonce: DKCase.nonce, // 安全验证字段
                case_slug: DKCase.current_slug // 传递当前页面的分类slug
            },
            success: function(res) {
                if (res.status) {
                    // 渲染数据到页面容器（根据你的需求调整HTML结构）
                    let html = '';
                    res.data.forEach(item => {
                        html += `
                            <div class="case-item">
                                <img src="${item.img_url}" alt="${item.title}">
                                <p>${item.title}</p>
                            </div>
                        `;
                    });
                    $('.case-img').html(html);
                } else {
                    $('.case-img').html('<p>暂无相关案例</p>');
                }
            },
            error: function(xhr) {
                console.error('Ajax请求失败:', xhr.responseText);
            }
        });
    }
});

2. 修改后端Ajax函数：动态接收参数并查询数据 #

更新functions.php中的dk_get_case函数，替换固定的page-a为前端传递的slug，同时添加安全验证：

add_action('wp_ajax_get_case', 'dk_get_case');
add_action('wp_ajax_nopriv_get_case', 'dk_get_case');
function dk_get_case() {
    // 1. 安全验证：防止非法请求
    if (!isset($_POST['nonce']) || !wp_verify_nonce($_POST['nonce'], 'dk_case_secure')) {
        wp_send_json_error(['message' => '非法请求']);
    }

    // 2. 接收并验证前端传递的slug
    $case_slug = isset($_POST['case_slug']) ? sanitize_text_field($_POST['case_slug']) : '';
    if (empty($case_slug)) {
        wp_send_json_error(['message' => '缺少分类标识']);
    }

    $return = ['status' => false, 'data' => [], 'message' => ''];
    $case_clinics = [1,2,3,4];
    $all_posts = [];

    foreach ($case_clinics as $clinic_id) {
        $posts = get_posts([
            'posts_per_page' => -1,
            'post_type' => 'case',
            'tax_query' => [
                'relation' => 'AND',
                [
                    'taxonomy' => 'case_clinic',
                    'field' => 'term_id',
                    'terms' => $clinic_id
                ],
                [
                    'taxonomy' => 'case_category',
                    'field' => 'slug',
                    'terms' => $case_slug // 替换为动态传递的slug
                ]
            ]
        ]);

        // 整理需要返回给前端的数据（只返回必要字段）
        foreach ($posts as $post) {
            setup_postdata($post);
            $all_posts[] = [
                'title' => get_the_title(),
                'img_url' => get_the_post_thumbnail_url($post->ID, 'full'),
                'permalink' => get_permalink()
            ];
        }
        wp_reset_postdata();
    }

    // 3. 返回结果
    if (!empty($all_posts)) {
        $return['status'] = true;
        $return['data'] = $all_posts;
        $return['message'] = '数据获取成功';
    } else {
        $return['message'] = '暂无匹配数据';
    }

    wp_send_json($return); // WordPress官方JSON返回函数
    wp_die(); // 必须结束Ajax请求
}

3. 模板文件优化 #

你不需要为每个分类创建单独的模板（比如taxonomy-case_category-page-a.php），只需要创建通用模板taxonomy-case_category.php，WordPress会自动为所有case_category分类页面加载这个模板：

<div class="col case-right">
    <h3 style="font-family:'Futura PT'; font-weight:600">Clinic</h3>
    <h4 style="font-weight:600">Clinic</h4>
    <!-- 数据展示容器，由Ajax动态填充 -->
    <div class="case-img" data-slider-3></div>
    <div class="popup"></div>
</div>

关键说明 #

• 为什么不能用$_SERVER获取URL？因为Ajax请求的REQUEST_URI指向的是/wp-admin/admin-ajax.php，不是当前页面的URL，所以必须由前端主动传递页面标识。
• 安全验证：添加nonce是WordPress Ajax的强制最佳实践，能有效防止CSRF攻击。
• 数据精简：后端只返回前端需要的字段，避免传递完整的WP_Post对象，减少冗余和安全风险。

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