使用 AJAX 和 PHP 构建动态下拉列表：解决多结果拼接问题-php教程-PHP中文网

使用 AJAX 和 PHP 构建动态下拉列表：解决多结果拼接问题

DDD

发布： 2025-10-26 10:35:51

原创

1012人浏览过

使用 ajax 和 php 构建动态下拉列表：解决多结果拼接问题

本文旨在解决在使用 AJAX 从 PHP 接收数据并动态填充下拉列表时，数据拼接成单行字符串的问题。我们将详细介绍如何修改 PHP 代码以返回 JSON 格式的数据，并调整 JavaScript 代码以正确解析和利用这些数据，从而实现下拉列表的正确显示。

在使用 AJAX 从 PHP 获取数据来动态填充下拉列表时，一个常见的问题是 PHP 将多个结果连接成一个单独的字符串，导致下拉列表只显示一个选项，其内容是所有结果的拼接。本文将指导你如何通过修改 PHP 代码，使其返回 JSON 格式的数据，并相应地调整 JavaScript 代码，从而正确地解析和利用这些数据，最终实现下拉列表的正确显示。

问题分析

问题的根源在于 PHP 代码直接输出了原始字符串，而没有将其格式化为结构化数据。AJAX 接收到这些字符串后，无法正确地将其分割成单独的选项。

解决方案

要解决这个问题，需要进行以下两步：

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

修改 PHP 代码，使其返回 JSON 格式的数据。 JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。
修改 JavaScript 代码，使其能够解析 JSON 数据，并正确地添加到下拉列表中。

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);
    $count=0;
    if($att->have_posts()){

        while($att->have_posts()) : $att->the_post();                                
                while(have_rows('mods')) : the_row();                                                             
                    echo get_sub_field('model');                   
                endwhile;                  
        endwhile;

    }
    die(); 
}
add_action('wp_ajax_nopriv_list_of_brandcars', 'list_of_brandcars');
add_action('wp_ajax_list_of_brandcars', 'list_of_brandcars');
?>

登录后复制

需要修改的地方在于，将所有结果收集到一个数组中，然后使用 json_encode() 函数将数组编码为 JSON 字符串并输出。修改后的代码如下：

AI建筑知识问答

用人工智能ChatGPT帮你解答所有建筑问题

查看详情

<?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);
    $count=0;
    $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');
?>

登录后复制

JavaScript 代码修改

原始的 JavaScript 代码如下：

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

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

        $.ajax({
            type: 'POST',
            url: ajaxurl,   
            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 + '">' + data + '</option>');
                }
            }
        });
        die();
    });
});
</script>

登录后复制

需要修改的地方在于：

在 AJAX 请求中，指定 dataType: "json"，告诉 jQuery 期望接收 JSON 格式的数据，并自动解析。
在 success 回调函数中，正确地访问 JSON 数组中的每个元素。

修改后的代码如下：

<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: json_encode($response) 函数将 PHP 数组 $response 转换为 JSON 字符串。例如，如果 $response 是 ['Model1', 'Model2', 'Model3', 'Model4']，那么 json_encode($response) 将会生成字符串 "[Model1","Model2","Model3","Model4"]"。
JavaScript: dataType: "json" 告诉 jQuery 将接收到的数据解析为 JSON 对象。在 success 回调函数中，data 变量现在是一个 JavaScript 数组。data[i] 用于访问数组中索引为 i 的元素。