Дублирование 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, но они выглядят именно так, как вы ожидаете, и функционируют совершенно нормально.