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>