本文旨在解决在使用 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 格式的响应，并正确地解析这个响应以填充下拉菜单。
以下是修改后的 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 中正确访问和使用数据。
注意事项：
- 确保 PHP 启用了 JSON 扩展。
- 检查 PHP 和 JavaScript 代码中是否存在语法错误，这些错误可能会导致数据解析失败。
- 使用浏览器的开发者工具可以方便地查看 AJAX 请求的响应，并检查返回的 JSON 数据是否正确。
通过遵循这些步骤，可以确保从 PHP 获取的数据能够正确地填充到下拉菜单中，从而提供更好的用户体验。
