AJAX接收PHP返回车型数据拼接为单串，拆分填入下拉选择框问题

核心修改思路 #

采用JSON结构化传输车型列表，避免字符串拆分的兼容性问题，修改方案如下：

修改PHP接口代码 #

<?php
function list_of_brandcars() {
    $model_option = $_POST['pass_data'];  

    $carposts = array(             
        'post_type' => 'list_of_cars',
        'post_status' => 'publish',              
        's' => $model_option
    );                  

    $att = new WP_Query($carposts);
    // 初始化车型存储数组
    $models = [];
    if($att->have_posts()){
        while($att->have_posts()) : $att->the_post();                                
            while(have_rows('mods')) : the_row();                                                             
                // 收集车型到数组而非直接输出拼接
                $models[] = get_sub_field('model');                   
            endwhile;                  
        endwhile;
        // 重置WordPress查询数据，避免后续查询异常
        wp_reset_postdata();
    }
    // 声明返回格式为JSON
    header('Content-Type: application/json');
    // 输出结构化的车型数组
    echo json_encode($models);
    die(); 
}
add_action('wp_ajax_nopriv_list_of_brandcars', 'list_of_brandcars');
add_action('wp_ajax_list_of_brandcars', 'list_of_brandcars');
?>

修改jQuery请求代码 #

<script>
$(document).ready(function($) { 
    
    $('#input_11_11').change(function(){
        var from_brand = $(this).val();
        
        $.ajax({
            type: 'POST',
            url: ajaxurl,
            // 声明预期返回JSON格式
            dataType: 'json',
            data: {     
                action: 'list_of_brandcars',                        
                pass_data: from_brand
            },
            success: function(data) {           
                $('#input_11_183').empty();
                // 遍历车型数组生成选项
                for (var i = 0; i < data.length; i++) {             
                    $('#input_11_183').append('<option value="' + data[i] + '">' + data[i] + '</option>');
                }
            }
        });
        // 移除原代码中错误的die()调用，前端JS无该语法
    });
});
</script>

可选兼容方案（不推荐） #

如果需要保持字符串输出的形式，可在PHP输出时用特殊分隔符拼接：

echo implode('|', $models);

前端拆分字符串后遍历即可：

success: function(data) {
    $('#input_11_183').empty();
    var modelList = data.split('|');
    for (var i = 0; i < modelList.length; i++) {
        $('#input_11_183').append('<option value="' + modelList[i] + '">' + modelList[i] + '</option>');
    }
}

该方案存在车型名包含分隔符时出错的风险，优先选择JSON传输方案。

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