本文旨在解决在使用 AJAX 从 PHP 接收数据并动态填充下拉列表时，数据拼接成单行字符串的问题。我们将详细介绍如何修改 PHP 代码以返回 JSON 格式的数据，并调整 JavaScript 代码以正确解析和利用这些数据，从而实现下拉列表的正确显示。
在使用 AJAX 从 PHP 获取数据来动态填充下拉列表时，一个常见的问题是 PHP 将多个结果连接成一个单独的字符串，导致下拉列表只显示一个选项，其内容是所有结果的拼接。本文将指导你如何通过修改 PHP 代码，使其返回 JSON 格式的数据，并相应地调整 JavaScript 代码，从而正确地解析和利用这些数据，最终实现下拉列表的正确显示。
问题分析
问题的根源在于 PHP 代码直接输出了原始字符串，而没有将其格式化为结构化数据。AJAX 接收到这些字符串后，无法正确地将其分割成单独的选项。
解决方案
要解决这个问题，需要进行以下两步：
立即学习“PHP免费学习笔记（深入）”；
修改 PHP 代码，使其返回 JSON 格式的数据。 JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。修改 JavaScript 代码，使其能够解析 JSON 数据，并正确地添加到下拉列表中。
PHP 代码修改
原始的 PHP 代码如下：
'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 字符串并输出。修改后的代码如下：
'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 代码如下：
$(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('' + data + ''); } } }); die(); });});
需要修改的地方在于：
在 AJAX 请求中，指定 dataType: “json”，告诉 jQuery 期望接收 JSON 格式的数据，并自动解析。在 success 回调函数中，正确地访问 JSON 数组中的每个元素。
修改后的代码如下：
$(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: 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 的元素。
总结
通过将 PHP 代码修改为返回 JSON 格式的数据，并相应地调整 JavaScript 代码以解析 JSON 数据，可以有效地解决 AJAX 接收多个结果并将其拼接成单行字符串的问题，从而实现动态下拉列表的正确显示。
注意事项：
确保 PHP 服务器启用了 JSON 扩展。在调试 AJAX 请求时，可以使用浏览器的开发者工具查看网络请求和响应，以便更好地理解数据传输的过程。在处理复杂的数据结构时，可以使用更高级的 JSON 解析和生成库，例如 json_decode() 和 json_encode() 函数的选项。
以上就是使用 AJAX 和 PHP 构建动态下拉列表：解决多结果拼接问题的详细内容，更多请关注php中文网其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1327535.html
微信扫一扫 
支付宝扫一扫 
