Django重繪頁面而不重新加載整個頁面

我想以特定的時間間隔重繪 頁面，例如每 10 秒一次，而不重新加載頁面。我正在向 api 發送獲取請求。我的 ajax 代碼很好地重繪 了頁面，但它會導致問題，因為它一次又一次地加載所有 div。重繪 時如何使以 div 為中心的重繪 洗掉與之前相同的 div？

hmtl;

{% extends 'elements/sidebar.html' %}
{% load static %}
{% block content %}
<!---->
<img src="{% static '/images/techops.png' %}" alt="Django重繪 頁面而不重新加載整個頁面" >
<div > 
</div>
<br>
<div  style="float: top; margin-bottom: 2%;">
  <div  style="text-align: center;"> <span style="font-size: 30px; color: white;">DASHBOARD CHECK</span></div>
  <form  action="dashcontrol" method="POST">
    {% csrf_token %}
    {% load humanize %}
                   <!---->   
  </form> 
  </div>
  <!-- Modal -->
  <section >
    <div >
        <div >
            <div >
            </div>
        </div>
        <!-- Pricing Table starts -->
        <div id="testdiv" >
      <div >
          {%if testtt > 1000 %}<div >{%else%}<div >{%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 %}

網址.py;

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

阿賈克斯;

<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 }

uj5u.com熱心網友回復：

一種可能的解決方案是
隱藏默認持續時間是 400 毫秒，我認為用戶不會注意到這一點。
創建新網址

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>

視圖.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 }

partialdashcontrol.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>

標籤：javascript 姜戈 阿贾克斯

上一篇：如何通過ajaxMVC將物件串列傳遞給方法

下一篇：XMLHttpRequest操作JSON檔案