AJAX 成功数据未正确显示答案

【问题标题】：AJAX success data not showing correctlyAJAX 成功数据未正确显示
【发布时间】：2018-05-30 10:05:38
【问题描述】：

由于某种原因，下面的 ajax 成功函数不起作用

我想做什么？

按下按钮
获取风味列表
在弹出窗口或 div 中显示列表（均无效）

AJAX 调用：

$('#datatable').on( 'click', '.recipeFlavours', function (e) {
    var token = '<?php echo json_encode($token); ?>';
    var flavourList = true;
    var table = $('#datatable').DataTable();
    var rowSelector;
    var li = $(this).closest('li');

    if ( li.length ) {
     rowSelector = table.cell( li ).index().row;
    }
    else {
      rowSelector =  $(this).closest('tr');
    }

    var recipeID = table.row(rowSelector).data().recipe_id; 


    $.ajax({
        type: "POST",
        url: "controllers/recipeControl.php",
        data: { token: token, recipeID: recipeID, flavourList: flavourList },
        success: function(data){

            $(".success_container").html(data);
            console.log(data);

            var popup = '<div class="modal fade" id="notes-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;"><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>' + data + '</div></div></div>';




    $(popup).modal('toggle');

        },
    });
    return false;
});

控制器：在没有json_encode() 的情况下可以像PHP 一样工作

/**
    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']){

        //echo json_encode($Recipes->getRecipeFlavours($recipeid));
            $html = "<div>";
            $content = $Recipes->getRecipeFlavours($_POST['recipeID']);
            foreach($content as $value) {
                $html .= $value['recipe_flavour_name'].$value['recipe_flavour_percent'];
            }
            $html .= "</div>";
            echo json_encode($html);

    }
}

获取风味和百分比的函数：

/**
    GET RECIPE FLAVOUR LIST
*/

public function getRecipeFlavours($recipeid) {
    $query = 'SELECT recipe_flavour_name, recipe_flavour_percent FROM recipe_flavours WHERE recipe_flavour_recipe_id = :recipeid';
    $stmt = $this->queryIt($query);
    $stmt = $this->bind(':recipeid',$recipeid);
    if($this->execute()) {
        return $this->resultset();
    }
}

作为 PHP，这是输出：

作为 AJAX 中的成功数据：

【问题讨论】：

移除 json_encode()
如果您的响应是纯 html，则不需要对数据进行 json 编码。并在您的 ajax 请求中指定 type of response，即使有智能自动猜测。
你们太棒了，我之前确实尝试过，但由于某种原因它根本没有显示任何数据，谢谢！！！

标签： php arrays ajax

【解决方案1】：

删除 json_encode()，因为您使用 HTML 作为 ajax 的数据类型

 if(isset($_POST['flavourList'])) {
    if($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest' && isset($_POST['token']) && json_decode($_POST['token']) === $_SESSION['token']){

        //echo json_encode($Recipes->getRecipeFlavours($recipeid));
            $html = "<div>";
            $content = $Recipes->getRecipeFlavours($_POST['recipeID']);
            foreach($content as $value) {
                $html .= $value['recipe_flavour_name'].$value['recipe_flavour_percent'];
            }
            $html .= "</div>";
            echo $html;

    }
}

【讨论】：

你使用的是纯 HTML，所以不需要应用 json_encode()

【解决方案2】：

您在控制器中返回响应时使用 json_encode，但在 javascript 中处理响应时未解码。

所以请删除 json_encode 并尝试。它会起作用的。

【讨论】：

【解决方案3】：

试试这个代码：

var obj = jQuery.parseJSON(data);
            $(".success_container").html(obj);
            console.log(obj);

            var popup = '<div class="modal fade" id="notes-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;"><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>' + obj + '</div></div></div>';
$('#test1').html(popup);

alert(popup)

【讨论】：