WordPress Ajax根据文章ID获取指定内容问题求助

嘿，我来帮你搞定这个问题！看起来你已经走对了方向，但可能在参数验证、数据输出或者前端传参上有点小问题。让我们一步步修正：

首先，你的PHP代码需要做几个关键调整：验证传入的post_id合法性、确保正确输出单篇文章的数据，并且用WordPress推荐的方式返回JSON响应。

add_action('wp_ajax_data_fetch', 'data_fetch');
add_action('wp_ajax_nopriv_data_fetch', 'data_fetch');
function data_fetch() {
    // 1. 安全验证：检查nonce（后续会说明怎么传递）
    if (!wp_verify_nonce($_POST['_wpnonce'], 'data_fetch_nonce')) {
        wp_send_json_error('权限验证失败');
    }

    // 2. 验证post_id参数是否合法
    if (!isset($_POST['post_id']) || !is_numeric($_POST['post_id'])) {
        wp_send_json_error('无效的文章ID');
    }

    $post_id = intval($_POST['post_id']);
    // 查询指定ID的sponsors类型文章
    $query = new WP_Query([
        'p' => $post_id,
        'post_type' => 'sponsors',
        'post_status' => 'publish' // 确保只查询已发布的文章
    ]);

    $response = [];
    if ($query->have_posts()) {
        while ($query->have_posts()) {
            $query->the_post();
            // 收集你需要的文章数据，比如标题、内容、自定义字段等
            $response = [
                'title' => get_the_title(),
                'content' => get_the_content(),
                // 如果有自定义字段，可以在这里添加，比如：
                // 'sponsor_url' => get_post_meta(get_the_ID(), 'sponsor_url', true)
            ];
        }
        wp_reset_postdata(); // 重置文章数据，避免影响后续查询
        wp_send_json_success($response);
    } else {
        wp_send_json_error('未找到指定文章');
    }

    wp_die(); // 必须退出，避免输出多余内容
}

你需要确保前端正确传递post_id参数到后端。这里给一个简单的示例，假设你有一个按钮触发请求并显示弹窗：

document.addEventListener('DOMContentLoaded', function() {
    // 假设按钮有类名fetch-sponsor-btn，且data-post-id存储文章ID
    const fetchBtn = document.querySelector('.fetch-sponsor-btn');
    
    if (fetchBtn) {
        fetchBtn.addEventListener('click', function() {
            const postId = this.getAttribute('data-post-id');
            
            // 发送Ajax请求
            fetch(ajax_object.ajaxurl, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: new URLSearchParams({
                    action: 'data_fetch', // 对应后端的action名
                    post_id: postId,
                    _wpnonce: ajax_object.nonce // 安全验证用的nonce
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // 渲染弹窗内容
                    const modal = document.createElement('div');
                    modal.innerHTML = `
                        <div style="position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);padding:2rem;background:#fff;border-radius:8px;z-index:9999;">
                            <h3>${data.data.title}</h3>
                            <div>${data.data.content}</div>
                            <button class="close-modal" style="margin-top:1rem;padding:0.5rem 1rem;">关闭</button>
                        </div>
                    `;
                    document.body.appendChild(modal);
                    
                    // 关闭弹窗逻辑
                    modal.querySelector('.close-modal').addEventListener('click', () => modal.remove());
                } else {
                    alert(data.data); // 显示错误提示
                }
            })
            .catch(error => console.error('请求出错:', error));
        });
    }
});

• 传递Ajax变量到前端：在主题functions.php中添加脚本本地化代码，确保前端能拿到ajaxurl和nonce：

function enqueue_custom_ajax_scripts() {
    wp_enqueue_script('custom-ajax', get_template_directory_uri() . '/js/custom-ajax.js', [], '1.0', true);
    wp_localize_script('custom-ajax', 'ajax_object', [
        'ajaxurl' => admin_url('admin-ajax.php'),
        'nonce' => wp_create_nonce('data_fetch_nonce')
    ]);
}
add_action('wp_enqueue_scripts', 'enqueue_custom_ajax_scripts');

如果还是显示所有文章，检查这几点：

• 前端请求的post_id参数是否正确（浏览器控制台→Network标签查看请求参数）
• 对应的sponsors类型文章是否存在且已发布
• 后端的action名称和前端是否完全一致（都是data_fetch）

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