Как избежать html-тегов и показать его в jquery?

Question

test.php читает базу данных и подготавливает ее в формате JSON.затем test.html вызовите данные и отобразите их в таблице.

test.php.

<?php
$conn = new mysqli("localhost", "root", "xxxx", "guestbook"); 
$stmt = $conn->prepare('SELECT title, content, author, email, ip FROM lyb where  title="test"');
$stmt->execute();
$stmt->bind_result($title, $content, $author, $email, $ip);
$result = [];
while ($stmt->fetch()) {
    $result[] = [
        'title'   => $title,
        'content' => $content,
        'author'  => $author,
        'email'   => $email,
        'ip'      => $ip
    ];
}
header('Content-type: application/json; charset=utf-8');
echo json_encode($result);
?>

Теперь для проверки test.php с php -f test.php.

[{"title":"test","content":"<p><img alt=\"\" src=\"upfiles\/54591303758197437.jpg\" \/><\/p>","author":"me","email":"me@tom.com","ip":"111.111.111.111"}]

Обратите внимание: значение содержимого содержит HTML-теги, я хочу показать его на веб-странице.

test.html обратный вызов файла test.php и отображение данных на веб-странице.

<h2 align="center">Ajax show data in table</h2>
<table border="2">
    <tbody id="disp">
        <th>title</th>
        <th>content</th>
        <th>author</th>
        <th>email</th>
        <th>ip</th>
    </tbody>
</table>

<script> 
$(function(){
    $.getJSON("test.php", function(data) {
        $.each(data,function(i,item){
            var tr = "<tr><td>" + item.title + "</td>" +
                        "<td>"  + item.content  + "</td>" +
                        "<td>"  + item.author  + "</td>" +
                        "<td>"  + item.email  + "</td>"  +
                        "<td>"  + item.ip  + "</td></tr>"
            $("#disp").append(tr);
        });
    });
});
</script>

Что я получаю, как показано ниже:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code><h2 align="center">Ajax show data in table</h2>
<table border="2">
    <tbody id="disp">
        <th>title</th>
        <th>content</th>
        <th>author</th>
        <th>email</th>
        <th>ip</th>
        <tr>
            <td>test</td>
            <td></td>
            <td>me</td>
            <td>me@tom.com</td>
            <td>111.111.111.111</td>
        </tr>
    </tbody>
</table> 

Введите 127.0.0.1/test.html, все теги и значения содержимого <p><img alt=\"\" src=\"upfiles\/54591303758197437.jpg\" \/><\/p>" потерян.
Как отобразить содержимое <p><img alt="" src="upfiles/54591303758197437.jpg" /></p>", не содержащее escape-символа \, вместо его потери и вместо строксодержащий символ перехода \?

Я ожидаю показать как показано ниже:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code><h2 align="center">Ajax show data in table</h2>
<table border="2">
    <tbody id="disp">
        <th>title</th>
        <th>content</th>
        <th>author</th>
        <th>email</th>
        <th>ip</th>
        <tr>
            <td>test</td>
            <td>&ltp&gt;&lt;img alt="" src="upfiles/54591303758197437.jpg" /&gt;&lt;/p&gt;</td>
            <td>me</td>
            <td>me@tom.com</td>
            <td>111.111.111.111</td>
        </tr>
    </tbody>
</table> 

Answer 1

Проблема заключается в преобразовании строки, содержащей escape-символ, в необработанную внутреннюю строку html.

Сохранить другой фрагмент кода без изменений.

$(function(){
    $.getJSON("test-json.php", function(data) {
        $.each(data,function(i,item){
            alert(item.content);
            var tr = "<tr><td>" + item.title + "</td>" +
                        "<td>"  + $('<div/>').text(item.content).html() + "</td>" +
                        "<td>"  + item.author  + "</td>" +
                        "<td>"  + item.email  + "</td>"  +
                        "<td>"  + item.ip  + "</td></tr>"
            $("#disp").append(tr);
        });
    });
});

Основная концепция заключается в создании виртуального jquery html-контейнера, а затем текста (target-string) .html ().

$('<div/>').text(item.content).html()

Answer 2

На самом деле ваш код работает нормально. Когда я проверял DOM, содержимое там, но изображение не отображается. Вы можете проверить это, изменив цвет фона или добавив некоторый текст внутри вашего <p></p>.

Чтобы отобразить изображение, вам, вероятно, следует загрузить его перед его отображением. Вы могли бы взглянуть на это: jQuery динамическая загрузка изображений

Так как вы на самом деле хотите отобразить HTML, вы должны избежать его. Вы можете сделать это в php: https://www.w3schools.com/php/func_string_htmlspecialchars.asp