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數據將在響應正文中返回。