Дублирование HTML-заголовка при использовании JQuery/AJAX для добавления новых данных в таблицу без обновления страницы?

Я сослался на это stack overflow, чтобы отказаться от обновления страницы и использовать ajax/JQuery для обновления только таблицы при поступлении новых данных. Однако я получаю странную ошибку. Мой HTML-заголовок для сайта дублируется, присутствуя один раз в верхней части страницы и еще раз прямо над моей таблицей с границей, простирающейся над ним, почти как будто он находится в таблице - см. прикрепленное изображение моего сайта: Снимок экрана веб-сайта, основанного на таблицах, который имеет дублирующиеся заголовки. Я пробовал переместить заголовок в головную часть HTML, и это ничего не изменило, а также полностью удалить его безрезультатно. Это только в моем HTML-коде один раз, поэтому я думаю, что это может быть что-то не так с JQuery/ajax стороной вещей, но я новичок в этом, поэтому я не знаю, как устранить проблему. Любая помощь будет оценена по достоинству! Вот часть моего кода:

ftp.html

<html>
    <head>
        {% load static %}
        <link rel="stylesheet" type="text/css" href="{% static 'ssheet.css'%}" >
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

        <title>FTP Stats Table</title>
    </head>
<body>
    <h2>Ftp Stats Table</h2>

    <form action='deletef' method='GET'>    
        <button type='submit'>Clear table</button>
    </form>

    <table id="_appendHere2" class="tb" border="1">
        <tr>
            <th>Src_Fname</th>
            <th>Dest_Fname</th>
            <th>Bytes_Xfer</th>
            <th>Xfer_Sec</th>
            <th>Xfer_MBPS</th>
        </tr>
        {% for ftp in filetp %}
        <tr>
            <td>{{ ftp.Src_Fname }}</td>
            <td>{{ ftp.Dest_Fname }}</td>
            <td>{{ ftp.Bytes_Xfer }}</td>
            <td>{{ ftp.Xfer_Sec }}</td>
            <td>{{ ftp.Xfer_MBPS }}</td>
        </tr>
        {% endfor %}
    </table>
</body>
<script>
    $(document).ready(function () {
    var append_increment = 0;
    setInterval(function(){
        $.ajax({
            type: "GET",
            url: "{% url 'ftprefresh' %}",
            data: {'append_increment': append_increment}
        })
        .done(function(responses){
            $('#_appendHere2').html(responses);
            append_increment += 10;
        })
    }, 1000)
})
</script>
</html>

views.py (не включая мою функцию delete, так как она работает нормально и не участвует в этом) 

def ftptable(request):
    filetp = FTP.objects.all()                                      #assigns filetp with all of the current objects of ftp
    return render(request,'ftp.html',{'filetp':filetp})             #passes filetp object to the table generating html

#parses data from ftp post request
def ftpin(request):
    if request.method == 'POST':
        ftppost = FTP()                                             #creates new ftp object
        rawpost1 = request.body                                     #retrieves post message
        stringpost1 = str(rawpost1, "utf-8")                        #puts raw message into string 
        if( not stringpost1 or (stringpost1.split(' ',1)[0] != "COMPLETE")):
            return HttpResponse()
        stringpost1 = stringpost1.split(' ', 1)[1]                  #takes off the first object
        ftplist = stringpost1.split()                               #splits new string into list 
        ftppost.Src_Fname = ftplist[0]                              #populates new object
        ftppost.Dest_Fname = ftplist[1]
        ftppost.Bytes_Xfer = ftplist[2]
        ftppost.Xfer_Sec = ftplist[3]
        ftppost.Xfer_MBPS = ftplist[4]
        ftppost.save()                                              #saves new object to database
        return HttpResponse()

def ftprefresh(request):
    increment = int(request.GET['append_increment'])
    increment_to = increment + 10
    ftpt = Ingest.objects.order_by('-id')[increment:increment_to]
    return render(request, 'ftp_table_refresh.html', {'ftpt':ftpt})

и, наконец, ftp_table_refresh.html

{% load static %}
{% for ftp in ftpt %}
<tr>
    <td>{{ ftp.Src_Fname }}</td>
    <td>{{ ftp.Dest_Fname }}</td>
    <td>{{ ftp.Bytes_Xfer }}</td>
    <td>{{ ftp.Xfer_Sec }}</td>
    <td>{{ ftp.Xfer_MBPS }}</td>
</tr>
{% endfor %}

Если необходимо, я могу включить свой urls.py, но они выглядят именно так, как вы ожидаете, и функционируют совершенно нормально.

Вернуться на верх