AJAX响应和HTML无法正常工作

Question

在这里，我试图使用ajax在jsp页面中获得结果，但是却得到了不正确的结果。

问题：首先显示我的ajax响应，而不显示表标题。 这意味着它应该显示表标题，然后显示表内容，但不会发生。

我的jsp页面显示结果

我的Ajax代码：

<script>
    $(document).ready(function(){
        $(function(){
            $('#form1').submit(function(e){
                e.preventDefault();
                var form = $(this);
                var post_url = form.attr('action');
                var post_data = form.serialize();

                $.ajax({
                    type: 'POST',
                    url: post_url,
                    data: post_data,
                    success: function(msg) {

                        console.log(msg);
                        $('#LogsReceived').append(msg);

                    },
                    error: function (error) {
                        console.log(error);
                    }
                });
            });
        });
    });
</script>

这是我的html代码：

<div class="result" >

<p>
<table>

    <div id="LogsReceived">
        <tr>
            <th>Index</th>
            <th>Type</th>
            <th>Severity</th>
            <th>Source Host</th>
            <th>Source</th>
            <th>Program</th>
            <th>Priority</th>
            <th>Message</th>
            <th>User</th>
            <th>Facility</th>
            <th>Event Time</th>
        </tr>

    </div>
</table>
</p></div>

Answer 1

您的HTML结构无效。 您不能将div作为table的直接子级和tr的父级。 您要寻找的是thead或tbody ，而不是div 。 浏览器已对其进行了更正，将div重新定位到表的前面 。 （由于无效，浏览器可以做任何想做的事情：将div放在前面，放在后面，然后当作tbody对待，...）将table放在p中同样无效。 您可以使用浏览器的dev工具查看重新排列：只需右键单击表标题，然后选择“检查元素”（或类似内容）：

我建议您查看哪些元素可以去那里的各种规则规范 。

可能，您既需要thead tbody ：

<table>
    <thead>
        <tr>
            <th>Index</th>
            <th>Type</th>
            <th>Severity</th>
            <th>Source Host</th>
            <th>Source</th>
            <th>Program</th>
            <th>Priority</th>
            <th>Message</th>
            <th>User</th>
            <th>Facility</th>
            <th>Event Time</th>
        </tr>
    </thead>
    <tbody id="LogsReceived">
    </tbody>
</table>