Django刷新页面而不重新加载整个页面

Question

我想以特定的间隔刷新页面，例如每10秒刷新一次，而不重新加载页面。我正在向api发送get请求。我的ajax代码很好地刷新了页面，但它会引起问题，因为它一次又一次地加载所有div。如何在刷新时使以div为中心的刷新删除以前的div？

hmtl；

{% extends 'elements/sidebar.html' %}
{% load static %}
{% block content %}
<!---->
<img src="{% static '/images/techops.png' %}" alt="" class="responsive">
<div class="p text-center bg-light"> 
</div>
<br>
<div class="containerdashcontrol" style="float: top; margin-bottom: 2%;">
<div class="dashbaslik" style="text-align: center;"> <span style="font-size: 30px; color: white;">DASHBOARD CHECK</span></div>
<form class="form-horizontal" action="dashcontrol" method="POST">
{% csrf_token %}
{% load humanize %}
<!---->   
</form> 
</div>
<!-- Modal -->
<section class="pricing-section">
<div class="container">
<div class="row justify-content-md-center">
<div class="col-xl-5 col-lg-6 col-md-8">
</div>
</div>
<!-- Pricing Table starts -->
<div id="testdiv" class="row">
<div class="col-md-4">
{%if testtt > 1000 %}<div class="dashcontrol2 featured">{%else%}<div class="dashcontrol featured">{%endif%}
<h4>{%if testtt > 1000 %}<span style="color: red;">XX</span><box-icon type='solid' name='badge' color="red"></box-icon>{%else%}<span style="color: green;">XX</span><box-icon type='solid' name='badge-check' color="green"></box-icon>{%endif%} </box-icon></h4>
<h4>{{testtt|intcomma}}</h4>
<a target="_blank" href="XX"><h6>KIBANA</h6></a>
</ul>
</div>
</div>
</section>
</div>
<script>
setInterval(function() { 
$.get("/dashcontrol", function(data, status){ 
$("#testdiv").hide(); //hide the page
$("#testdiv").append(data); // and after you hide that data append it.
});  
}, 5000);
</script>
{% endblock content %}
{% block scripts %}

{% endblock scripts %}

url.py；

url(r'^dashcontrol$', views.dashcontrol, name='dashcontrol'),

ajax；

<script>

setInterval(function() { 
$.get("/dashcontrol", function(data, status){ 
$("body").html(data); 
});  
}, 15000);
</script>

观点；

def dashcontrol(request):
url = "http://XX/XX*/_search"
headers = {'Content-type': 'application/json'}
params = {XX}
print('OK')
response = requests.get(url=url, json=params, headers=headers)
data = response.json()
testtt = data['hits']['total']
print(data['hits']['total'])
print('OK')
return render(request, 'dashcontrol.html', {'testtt ':testtt }

Answer 1

其中一个可能的解决方案是
隐藏默认持续时间为400ms，我认为用户不会注意到这一点
创建新的url

url(r'^dashcontrol$', views.dashcontrol, name='dashcontrol'),
url(r'^updatadashcontrol$', views.updatedashcontrol, name='updatedashcontrol'),

js

<script>

setInterval(function() { 
$.get("{% url 'updatedashcontrol' %}", function(data, status){ 
$("#testdiv").empty(); //hide the page
$("#testdiv").append(data); // and after you hide that data append it.
});  
}, 15000);
</script>

views.py

def dashcontrol(request):
url = "http://XX/XX*/_search"
headers = {'Content-type': 'application/json'}
params = {XX}
print('OK')
response = requests.get(url=url, json=params, headers=headers)
data = response.json()
testtt = data['hits']['total']
print(data['hits']['total'])
print('OK')
return render(request, 'dashcontrol.html', {'testtt ':testtt }
def updatedashcontrol(request):
url = "http://XX/XX*/_search"
headers = {'Content-type': 'application/json'}
params = {XX}
print('OK')
response = requests.get(url=url, json=params, headers=headers)
data = response.json()
testtt = data['hits']['total']
print(data['hits']['total'])
print('OK')
return render(request, 'partialdashcontrol.html', {'testtt ':testtt }

html(仅此不添加正文或html(

<div class="col-md-4">
{%if testtt > 1000 %}<div class="dashcontrol2 featured">{%else%}<div class="dashcontrol featured">{%endif%}
<h4>{%if testtt > 1000 %}<span style="color: red;">XX</span><box-icon type='solid' name='badge' color="red"></box-icon>{%else%}<span style="color: green;">XX</span><box-icon type='solid' name='badge-check' 
color="green"></box-icon>{%endif%} </box-icon></h4>
<h4>{{testtt|intcomma}}</h4>
<a target="_blank" href="XX"><h6>KIBANA</h6></a>
</ul>
</div>