AJAX成功回调数据无法正常显示问题求助

看起来你的AJAX回调失效主要是HTML被JSON编码转义导致的，同时还有几个小细节需要调整，下面一步步来解决：

1. 核心问题：JSON编码破坏了HTML结构 #

你的PHP控制器里把拼接好的HTML用json_encode()输出了，这会把HTML中的引号、尖括号等字符转义成实体（比如<变成<，"变成"），前端拿到的是转义后的字符串，直接插入页面会显示成纯文本而不是解析成DOM元素——这就是你看到AJAX数据里全是转义字符的原因。

2. 修复步骤 #

步骤1：修正PHP控制器输出 #

把控制器里的echo json_encode($html);改成直接输出HTML，因为我们返回的是HTML片段，不需要JSON编码：

/** GET RECIPE FLAVOURS FOR POPUP */
if(isset($_POST['flavourList'])) {
    if($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest' && isset($_POST['token']) && json_decode($_POST['token']) === $_SESSION['token']){
        $html = "<div>";
        $content = $Recipes->getRecipeFlavours($_POST['recipeID']);
        foreach($content as $value) {
            // 建议给每个风味加个换行或分隔符，提升可读性
            $html .= "<p>{$value['recipe_flavour_name']} {$value['recipe_flavour_percent']}</p>";
        }
        $html .= "</div>";
        echo $html; // 直接输出HTML，不要json_encode
    }
}

步骤2：调整AJAX请求，指定返回类型 #

在你的AJAX配置里加上dataType: 'html'，告诉jQuery我们预期返回的是HTML，避免自动解析错误：

$('#datatable').on( 'click', '.recipeFlavours', function (e) {
    var token = '<?php echo json_encode($token); ?>';
    var flavourList = true;
    var table = $('#datatable').DataTable();
    
    // 简化rowSelector逻辑，直接找最近的tr即可
    var $row = $(this).closest('tr');
    var recipeID = table.row($row).data().recipe_id;

    $.ajax({
        type: "POST",
        url: "controllers/recipeControl.php",
        data: { 
            token: token, 
            recipeID: recipeID, 
            flavourList: flavourList 
        },
        dataType: 'html', // 指定返回HTML类型
        success: function(data){
            $(".success_container").html(data);
            console.log(data);
            
            // 方案1：复用提前创建好的模态框（推荐）
            $("#flavour-content").html(data);
            $("#notes-modal").modal('toggle');
            
            // 如果你坚持动态创建模态框，要先移除旧的再添加新的，避免ID冲突
            // $("#notes-modal").remove();
            // var popup = '<div class="modal fade" id="notes-modal" ...>' + data + '</div>';
            // $(popup).modal('toggle');
        },
    });
    return false;
});

步骤3：优化模态框创建方式（可选但推荐） #

每次点击都动态生成模态框会导致DOM中出现多个相同id的元素，引发冲突。建议提前在页面里写好模态框结构：

<!-- 放在页面任意位置，比如body末尾 -->
<div class="modal fade" id="notes-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="notes-modal-container">
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
      <h1></h1>
      <h3>Recipe Flavours</h3>
      <br>
      <div id="flavour-content"></div> <!-- 用来放置风味内容的容器 -->
    </div>
  </div>
</div>

这样每次点击只需要更新#flavour-content的内容，再显示模态框即可，避免DOM冗余。

3. 额外检查点 #

• 确认$_POST['recipeID']能正确传递到PHP：可以在控制器里添加var_dump($_POST['recipeID'])验证数据是否接收正常。
• 确认getRecipeFlavours函数返回的数组结构正确：可以在PHP里var_dump($content)查看数据是否符合预期。

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