使用 AJAX 和 PHP 正确填充下拉菜单：解决多结果连接问题-php教程-PHP中文网

使用 AJAX 和 PHP 正确填充下拉菜单：解决多结果连接问题

DDD

发布： 2025-10-25 10:28:01

原创

531人浏览过

使用 ajax 和 php 正确填充下拉菜单：解决多结果连接问题

本文旨在解决在使用 AJAX 从 PHP 接收多个结果并填充下拉菜单时，数据连接成单行的问题。通过修改 PHP 代码以 JSON 格式输出数据，并调整 JavaScript 代码以正确解析和处理 JSON 响应，可以实现将每个结果作为下拉菜单的独立选项显示。

在使用 AJAX 从 PHP 获取数据并动态填充下拉菜单时，一个常见的问题是 PHP 返回的多个结果被连接成一个字符串，而不是作为单独的选项添加到下拉菜单中。这通常是由于 PHP 没有以正确的格式（例如 JSON）输出数据，并且 JavaScript 没有正确解析返回的数据造成的。以下将详细介绍如何解决这个问题。

问题分析

当 PHP 代码直接 echo 字符串时，这些字符串会被简单地连接起来，形成一个长的字符串。例如，如果 PHP 返回 "Model1"、"Model2"、"Model3" 和 "Model4"，客户端接收到的将是 "Model1Model2Model3Model4"，而不是一个包含四个独立值的数组。

解决方案

解决此问题的关键在于：

立即学习“PHP免费学习笔记（深入）”；

在 PHP 中构建数据结构： 将要返回的数据存储在一个数组中。
将数据编码为 JSON 格式： 使用 json_encode() 函数将数组转换为 JSON 字符串。
在 JavaScript 中指定数据类型： 在 AJAX 请求中设置 dataType: "json"，以便 jQuery 自动解析 JSON 响应。
在 JavaScript 中正确访问数据： 使用索引访问数组中的每个元素。

PHP 代码修改

以下是修改后的 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);
    $response = array(); // 创建一个空数组

    if($att->have_posts()){
        while($att->have_posts()) : $att->the_post();                                
            while(have_rows('mods')) : the_row();                                                             
                $response[] = get_sub_field('model'); // 将每个模型添加到数组中
            endwhile;                  
        endwhile;
    }

    echo json_encode($response); // 将数组编码为 JSON 并输出
    die(); 
}
add_action('wp_ajax_nopriv_list_of_brandcars', 'list_of_brandcars');
add_action('wp_ajax_list_of_brandcars', 'list_of_brandcars');
?>

登录后复制

关键修改：

创建了一个空数组 $response 来存储模型数据。
使用 $response[] = get_sub_field('model'); 将每个模型添加到数组中。
使用 echo json_encode($response); 将数组编码为 JSON 字符串并输出。

JavaScript 代码修改

以下是修改后的 JavaScript 代码示例：

AI Word

一款强大的 AI 智能内容创作平台，致力于帮助用户高效生成高质量、原创且符合 SEO 规范的各类文章。

226

查看详情

<script>
$(document).ready(function($) { 

    $('#input_11_11').change(function(){
        var from_brand = $(this).val();

        $.ajax({
            type: 'POST',
            url: ajaxurl,   
            dataType: "json", // 指定期望的响应类型为 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>'); // 访问数组中的每个元素
                }
            }
        });
    });
});
</script>

登录后复制

关键修改：

添加了 dataType: "json"，告诉 jQuery 期望接收 JSON 格式的响应，并自动解析它。
在 success 回调函数中，使用 data[i] 访问数组中的每个元素，并将其作为下拉菜单的选项添加到 #input_11_183 中。

完整示例

以下是一个完整的示例，展示了如何使用 AJAX 和 PHP 正确填充下拉菜单：

HTML (包含下拉菜单):

<select id="input_11_11">
  <option value="Brand1">Brand1</option>
  <option value="Brand2">Brand2</option>
</select>

<select id="input_11_183">
</select>

登录后复制

JavaScript (AJAX 请求):

<script>
$(document).ready(function($) { 

    $('#input_11_11').change(function(){
        var from_brand = $(this).val();

        $.ajax({
            type: 'POST',
            url: ajaxurl,   
            dataType: "json", // 指定期望的响应类型为 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>'); // 访问数组中的每个元素
                }
            }
        });
    });
});
</script>

登录后复制

PHP (处理 AJAX 请求):

<?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);
    $response = array(); // 创建一个空数组

    if($att->have_posts()){
        while($att->have_posts()) : $att->the_post();                                
            while(have_rows('mods')) : the_row();                                                             
                $response[] = get_sub_field('model'); // 将每个模型添加到数组中
            endwhile;                  
        endwhile;
    }

    echo json_encode($response); // 将数组编码为 JSON 并输出
    die(); 
}
add_action('wp_ajax_nopriv_list_of_brandcars', 'list_of_brandcars');
add_action('wp_ajax_list_of_brandcars', 'list_of_brandcars');
?>

登录后复制