动态加载select子分类时父分类内容在页面左上角异常显示求助

问题修复方案 #

问题根源 #

问题出在child_categories.php的输出逻辑上：你使用ob_get_clean()获取缓冲区的option代码后，没有终止脚本执行，若文件内缓冲区逻辑之外还有其他输出（比如父分类查询的冗余打印、引入的公共文件输出、PHP标签外的空白/文本），这些多余内容会随接口响应一起返回。ajax只把合法的option标签写入了#child下拉框，剩余的游离文本被浏览器直接渲染到了页面左上角。

修复步骤 #

• 第一步：修改child_categories.php末尾输出逻辑，输出内容后立刻终止脚本，避免后续多余输出：
  将原有代码

<?= ob_get_clean();?>

替换为

<?php
echo ob_get_clean();
exit;
?>

• 第二步：排查child_categories.php中ob_start()之前的所有代码，确认没有多余的echo、print_r等打印语句，同时检查PHP起始标签<?php前是否有空白字符、多余HTML内容，这类隐藏输出也会导致接口返回冗余内容。
• 第三步：若仍未解决，可以临时在ajax回调中打印完整响应内容，确认多余内容的来源：
  修改前端ajax的success回调：

success: function(data){
    console.log(data); // 打开浏览器开发者工具的控制台，查看返回的完整内容
    jQuery('#child').html(data);
}

如果控制台打印的内容中就包含左上角显示的父分类文本，即可确认问题出在child_categories.php的输出环节，按前两步排查即可解决。

内容的提问来源于stack exchange，提问作者Tom Thorpe