javascript - 处理 html 作为来自服务器的纯文本响应的问题

Question

我正在使用 Java 生成一个 html 表服务器端并将其作为 JSON 发送到客户端。所以我的回复是如下纯文本:

<table class="table"></table><thead class="thead-dark"> <tr> <th scope="col">#</th> <th scope="col">Username</th> <th scope="col">Score</th> </tr> </thead><tbody> <tr> <th scope="row"> 1 </th> <td>Marvin</td> <td>3.0</td> </tr> <tr> <th scope="row"> 2 </th> <td>testerich</td> <td>3.0</td> </tr></tbody>

我的 jQuery 脚本如下所示

if(reply.type === "highscores") {
        var el = reply.value.replace(/\s+/g,' ').trim();
        console.log(el);
        $('.score-table').empty();
        $('.score-table').html(el);
    }

console.log 输出上面引用的纯文本。

现在预期的行为是表格将显示在类为“score-table”的 div 中，但它只显示以下内容:

# Username Score 1 Marvin 3.0 2 testerich 3.0

所以它基本上从字符串中剥离了所有 html 标签？我现在搜索了几个小时，但没有找到解决方案。

Answer 1

问题是你的 html 响应，而不是 jQuery 或 js。查看 html 的第一行:

<table class="table"></table>

这没有任何意义。它需要看起来像这样:

<table class="table">
    <thead class="thead-dark"> 
        <tr> 
            <th scope="col">#</th> 
            <th scope="col">Username</th> 
            <th scope="col">Score</th> 
        </tr> 
    </thead>
    <tbody> 
        <tr> 
            <th scope="row"> 1 </th> 
            <td>Marvin</td>  
            <td>3.0</td> 
        </tr> 
        <tr> 
            <th scope="row"> 2 </th> 
            <td>testerich</td> 
            <td>3.0</td> 
        </tr>
    </tbody>
</table>