本文旨在解决在使用 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 代码示例：
'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 代码示例：
$(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('' + data[i] + ''); // 访问数组中的每个元素 } } }); });});
关键修改：
添加了 dataType: “json”，告诉 jQuery 期望接收 JSON 格式的响应，并自动解析它。在 success 回调函数中，使用 data[i] 访问数组中的每个元素，并将其作为下拉菜单的选项添加到 #input_11_183 中。
完整示例
以下是一个完整的示例，展示了如何使用 AJAX 和 PHP 正确填充下拉菜单：
HTML (包含下拉菜单):
Brand1 Brand2
JavaScript (AJAX 请求):
$(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('' + data[i] + ''); // 访问数组中的每个元素 } } }); });});
PHP (处理 AJAX 请求):
'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');?>
注意事项
确保 PHP 启用了 JSON 扩展。在调试 AJAX 请求时，可以使用浏览器的开发者工具（例如 Chrome DevTools）来查看请求和响应的数据。如果数据包含特殊字符，例如引号或斜杠，json_encode() 会自动对其进行转义。
总结
通过使用 JSON 格式传输数据，并确保 JavaScript 正确解析和处理 JSON 响应，可以轻松地解决 AJAX 接收多个结果并填充下拉菜单时数据连接成单行的问题。 这种方法不仅可以确保数据的正确传输，还可以提高代码的可读性和可维护性。
以上就是使用 AJAX 和 PHP 正确填充下拉菜单：解决多结果连接问题的详细内容，更多请关注php中文网其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1327230.html
微信扫一扫 
支付宝扫一扫 
