使用 AJAX 和 PHP 获取并填充下拉菜单的正确方法-php教程-PHP中文网

使用 AJAX 和 PHP 获取并填充下拉菜单的正确方法

聖光之護

发布： 2025-10-25 08:13:45

原创

738人浏览过

使用 ajax 和 php 获取并填充下拉菜单的正确方法

本文旨在解决在使用 AJAX 从 PHP 脚本获取数据并填充下拉菜单时，数据以连接字符串形式出现的问题。通过将 PHP 输出格式化为 JSON，并在 JavaScript 中正确解析，可以实现将每个数据项作为下拉菜单的独立选项显示。

在使用 AJAX 从 PHP 后端获取数据并动态更新前端下拉菜单时，经常会遇到数据格式不正确的问题。典型的情况是，期望下拉菜单显示多个独立的选项，但实际上却只显示一个包含所有数据连接在一起的字符串。这通常是由于 PHP 没有正确地将数据格式化为 JSON 格式，以及 JavaScript 没有正确解析返回的数据导致的。本文将详细介绍如何解决这个问题，确保从 PHP 获取的数据能够正确地填充到下拉菜单中。

PHP 端：构建 JSON 格式的响应

关键问题在于 PHP 脚本直接输出了连接在一起的字符串，而不是结构化的数据格式。要解决这个问题，需要将数据构建成一个数组，然后使用 json_encode() 函数将其转换为 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);
    $response = array(); // 创建一个空数组用于存储数据

    if($att->have_posts()){
        while($att->have_posts()) : $att->the_post();                                
            while(have_rows('mods')) : the_row();                                                             
                $response[] = get_sub_field('model'); // 将每个 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 = array();: 创建一个空数组 $response，用于存储从数据库查询到的 model 值。
$response[] = get_sub_field('model');: 在循环中，将每个 model 值添加到 $response 数组中。
echo json_encode($response);: 使用 json_encode() 函数将 $response 数组转换为 JSON 字符串，并通过 echo 输出。 json_encode() 函数是 PHP 内置的函数，用于将 PHP 数组或对象转换为 JSON 格式的字符串。

JavaScript 端：解析 JSON 响应并填充下拉菜单

在 JavaScript 中，需要修改 AJAX 请求，告诉 jQuery 期望接收 JSON 格式的响应，并正确地解析这个响应以填充下拉菜单。

法语写作助手

法语助手旗下的AI智能写作平台，支持语法、拼写自动纠错，一键改写、润色你的法语作文。

查看详情

以下是修改后的 JavaScript 代码：

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

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

        $.ajax({
            type: 'POST',
            url: ajaxurl,   
            dataType: "json", // 告诉 jQuery 期望接收 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": 在 AJAX 请求中，添加 dataType: "json" 选项。这告诉 jQuery 期望从服务器接收 JSON 格式的数据，并自动将其解析为 JavaScript 对象。
data[i]: 在 success 回调函数中，data 现在是一个 JavaScript 数组，可以使用索引 i 访问数组中的每个元素。 data[i] 表示数组 data 中索引为 i 的元素的值。

总结

通过将 PHP 输出格式化为 JSON 格式，并在 JavaScript 中正确解析 JSON 响应，可以有效地解决 AJAX 请求返回连接字符串的问题。确保在 PHP 中使用 json_encode() 函数将数据编码为 JSON，并在 JavaScript AJAX 请求中设置 dataType: "json"，以便 jQuery 能够自动解析响应。此外，还需要根据 JSON 数据的结构，在 JavaScript 中正确访问和使用数据。

注意事项：