WP_Query嵌套循环结合Ajax返回数据中断问题排查

核心问题：直接输出函数破坏JSON响应 #

你的代码在while循环里使用了the_title()和the_excerpt()这两个WordPress内置函数，它们的作用是直接将内容输出到浏览器响应流，而非返回字符串供你拼接。执行到这两个函数时，内容会被提前输出，直接破坏后续的JSON结构，这就是响应只到<div class="flex-container">就中断的原因——后续的标题/摘要提前输出，打断了JSON的生成流程。

修复步骤 #

1. 替换直接输出函数为返回值函数 #

把the_title()换成get_the_title()，the_excerpt()换成get_the_excerpt()，这两个函数会返回对应字符串，而非直接输出：

// 原代码
$offices_data .= '<h4 class="location">' . the_title() . '</h4>';
$offices_data .= '<p class="address">' . the_excerpt() . '</p>';

// 修改后
$offices_data .= '<h4 class="location">' . get_the_title() . '</h4>';
$offices_data .= '<p class="address">' . get_the_excerpt() . '</p>';

2. 修复$offices_data变量作用域问题 #

你在foreach ($terms as $term)循环内初始化$offices_data = '';，会导致每次循环清空之前的内容，最终只保留最后一个分类的办公室数据。需要把初始化移到循环外：

// 移到foreach循环之前
$offices_data = '';
foreach ($terms as $term) :
    // ... 后续代码
endforeach;

3. 优化WP_Query判断逻辑 #

原代码中if ($get_offices)的判断不够准确，改用$get_offices->have_posts()检查是否有文章，避免空查询生成无效HTML：

// 原代码
if ($get_offices) :

// 修改后
if ($get_offices->have_posts()) :

完整修复后的代码 #

function evidian_get_countries()
{
    $country_list = get_categories(array(
        'hide_empty'      => false,
        'taxonomy' => 'locations-category',
        'parent' => intval($_POST['region']), // 新增安全验证
        'orderby' => 'name',
        'order'   => 'ASC'
    ));

    // Offices Location
    $terms = get_terms('locations-category', array('parent' => intval($_POST['region']), 'orderby' => 'slug', 'order' => 'ASC', 'hide_empty' => false));

    $offices_data = ''; // 移到循环外初始化
    foreach ($terms as $term) :

        $args_offices = array(
            'post_type' => 'locations',
            'tax_query' => array(
                array(
                    'taxonomy' => 'locations-category',
                    'field' => 'term_id',
                    'terms'    => $term->term_id
                ),
            ),
        );

        $get_offices = new WP_Query($args_offices);
        
        if ($get_offices->have_posts()) : // 准确判断是否有文章
            $offices_data .= '
            <div class="accordion-item">
                <button class="accordion-heading active">' . $term->name . '</button>
                <div class="accordion-content show">
                    <div class="flex-container">';
            while ($get_offices->have_posts()) :
                $get_offices->the_post();
                $offices_data .= '<div class="flex-item">
                                <div class="content">
                                    <h4 class="location">' . get_the_title() . '</h4>
                                    <p class="address">' . get_the_excerpt() . '</p>
                                </div>';
                if (has_post_thumbnail(get_the_ID())) {
                    $image_url = wp_get_attachment_image_src(get_post_thumbnail_id(get_the_ID()), 'full');

                    $offices_data .= '<img class="location-img" src="' . $image_url[0] . '" alt="">';
                }
                $offices_data .= '
        </div>';
            endwhile;
            wp_reset_postdata();
            $offices_data .= '</div>
</div>
</div>';
        endif;
    endforeach;

    $options = array(); // 初始化数组避免未定义警告
    foreach ($country_list as $country) {
        $options[] = '<option value="' . $country->term_id . '">' . $country->name . '</option>';
    }

    $data = array('country' => $options, 'offices' => $offices_data);
    wp_send_json_success($data);
    exit();
}

额外优化提示 #

• 对$_POST['region']用intval()做安全验证，确保传入的是整数，避免SQL注入风险。
• 初始化$options = array()，防止$country_list为空时出现未定义变量警告。

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