繁体   English   中英

AJAX响应和HTML无法正常工作

[英]ajax response and html not working properly

在这里,我试图使用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>

您的HTML结构无效。 您不能将div作为table的直接子级和tr的父级。 您要寻找的是theadtbody ,而不是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>

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM