javascript - 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))

所以需要使用 jquery 的 append，而不是 append，来自 dom api，它只在参数中接受一个节点元素。如果您仍然需要使用 dom api 的追加，请使用类似:

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