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>

我得到的如下：

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

键入<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>"，而不是丢失它，而不显示包含转义字符\的字符串？

我希望显示如下：

Answer 1

实际上，您的代码工作正常。当我检查DOM时，内容在那里，但未显示图像。您可以通过更改背景颜色或在<p></p>内添加一些文本来进行检查。

要显示图像，您可能应该在显示图像之前先加载它。您可以看一下： jQuery dynamic image loading

由于您实际上想显示html，因此应该对其进行转义。您可以在php中完成：https://www.w3schools.com/php/func_string_htmlspecialchars.asp

Answer 2

将包含转义符的字符串转换为原始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容器，然后创建text（target-string）.html（）。

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

如何转义html标签并将其显示在jquery中？

2 个答案: