Ajax调用以纯字符串格式返回数据。

Question

在PHP中，我可以执行以下操作：

echo "<div>".$myvariable."</div>";

它将在HTML中使用div的标签打印出我的变量。 但是最近，我需要使用jquery进行ajax调用。 我对ajax有点熟悉，但是我不太用。 无论如何，我运行了ajax代码，它像我想要的那样将数据打印到我的HMTL元素框中，但是div标签随内容本身一起被打印和显示！

整个返回数据几乎都是1个长字符串，而不是PHP像我希望的那样解析我的数据。 我哪里做错了？ 为什么只返回1个长字符串？

PHP代码：

<?php

require 'database.php';

$meal = $_POST['meals'];

$meal_q = "SELECT item
              FROM meal_ingredients
              WHERE meal_name='$meal'
              ORDER BY item";

$meal_c = $conn->query($meal_q);
    while ($row = $meal_c->fetch_assoc()){
         $view_ingredient = $row['item'];
         echo "<div>".$view_ingredient."</div>";
    };

?>

JQUERY代码：

if($('body').hasClass('CreateMealPage')){

    $('tr').on('click', function(e){
        $('#sidebar').animate({right: '-200px'}, 500);
        var meals = $(this).find('.meals').text();

        $.ajax({
          method: "POST",
          url: 'meal_list.php',
          data: {meals: meals},
          success: function(data) {
            var sidebar = document.getElementById('sidebar');
            sidebar.innerHTML = "";
            sidebar.append(data);
          }
        });
    });

};

屏幕上显示的内容：

<div>ingredientname</div>
<div>ingredientname</div>
<div>ingredientname</div>

而不是：

ingredientname
ingredientname
ingredientname

Answer 1

只需更换

sidebar.innerHTML = "";
sidebar.append(data);

同

sidebar.innerHTML = data;

要回答您的评论，您可以在jquery中使用append with following

$(sidebar).append($(data))

因此，需要使用dom api中的jquery的append而不是append，而dom api仅在参数中使用node元素。 如果仍然需要使用dom api的append，请使用类似以下内容的方法：

sidebar.append(document.createRange().createContextualFragme‌​nt(data))

Answer 2

将dataType: "html"添加到$.ajax()调用中的属性中，如下所示：

    $.ajax({
      method: "POST",
      url: 'meal_list.php',
      dataType: "html",
      data: {meals: meals},
      success: function(data) {
        var sidebar = document.getElementById('sidebar');
        sidebar.innerHTML = "";
        sidebar.append(data);
      }
    });

这将通知该调用以期望HTML数据将在响应正文中返回。