Ajax-Aufruf gibt Daten im reinen String-Format zurück.

Question

In PHP kann ich Dinge tun, wie folgt:

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

Welche meine Variable mit divs in HTML für seine Tags werden ausdrucken. In letzter Zeit musste ich jedoch mit jquery einen Ajax-Aufruf durchführen. Ich bin mit Ajax etwas vertraut, aber ich benutze es nicht viel. Wie auch immer, ich führe den Ajax-Code aus, er druckt die Daten wie gewünscht in meine HTML-Element-Box, aber die div-Tags werden gedruckt und zusammen mit dem Inhalt selbst angezeigt!

Die gesamten Rückgabedaten sind ziemlich 1 lange Zeichenfolge, anstatt die PHP-Parsing meine Daten, wie ich es will. Was habe ich falsch gemacht? Warum gibt es nur 1 lange Saite zurück?

PHP CODE:

<?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 Code:

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); 
      } 
     }); 
    }); 

}; 

was auf dem Bildschirm dargestellt wird:

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

STATT:

ingredientname 
ingredientname 
ingredientname 

Answer 1

ersetzen nur

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

mit

sidebar.innerHTML = data; 

Ihren Kommentar beantworten können Sie mit folgenden in jquery

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

so jQuerys append verwendet werden muss, verwenden Sie anhängen statt append, from dom api, das ein Knotenelement nur in Argumenten akzeptiert. Wenn Sie noch Anfügen von dom api verwenden müssen, verwenden Sie so etwas wie:

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

Answer 2

hinzufügen dataType: "html" zu den Eigenschaften in Ihrem $.ajax() Aufruf wie folgt aus:

$.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); 
     } 
    }); 

Diese den Anruf informiert HTML-Daten zurückgegeben werden im Antworttext zu erwarten.