Question

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

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

我的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中的类似无效。您可以使用浏览器的开发工具查看重新排列：只需右键单击表标题，然后选择“检查元素”（或类似内容）：

我建议查看有关the spec中哪些元素可以到达何处的各种规则。

可能您同时需要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>

ajax响应和html无法正常运行

1 个答案: