刷新表格而不刷新Django中的頁面

Question

有小表格需要每10秒更新一次新數據。整個網站在Django工作。 JSON將數據解析爲1個表，並在數據庫中每10秒重寫一次數據。該網站正在顯示數據庫中的數據。我需要的程序是每10秒鐘用新數據刷新前端表 - 這將是我假設的AJAX，你能幫我寫代碼嗎？它不會將數據附加到表中，只是不斷刷新它。

示例 - 數據庫中的表具有固定的10行數據，並且正在使用JSON進行刷新。前端總是顯示10行，因此每10秒鐘，表（前端）將始終顯示10行並顯示新數據。

Django的版本1.11

這裏是Python文件

views.py

def prices(request): 
    prices = Price.objects.all().order_by('id') 
    return render(request, 'prices.html', {'prices':prices}) 

prices.html

<div class="col-md-8"> 
    <table class="table table-striped"> 
     <thead> 
      <tr> 
       <th>TYPE</th> 
       <th>NAME</th> 
       <th>PRODUCT</th> 
       <th>VALUE</th>     
      </tr> 
     </thead> 
     <tbody> 
     {% for price in prices %} 
      <tr> 
       <td>{{ price.type }}</td> 
       <td>{{ price.name }}</td> 
       <td>{{ price.product }}</td> 
       <td>{{ price.value }}</td> 
      </tr> 
     {% endfor %} 
     </tbody> 
    </table> 
</div> 

urls.py

urlpatterns = [ 
    url(r'^prices/', product_views.prices, name='prices'), 
    url(r'^admin/', admin.site.urls), 
] 

Answer 1

我已經用Django REST Framework和AJAX完成了上述提示。不知道如何在視圖中做到這一點，所以我使用REST。通過使用REST，我有用於AJAX的JSON。以前的回答是刷新整個頁面，這是刷新前臺表格。

我不能說這是最好的解決方案，但它工作得很好。也許有更快的一個。

API

serializers.py

from rest_framework import serializers 
from .models import Price 

class PriceModelSerializer(serializers.ModelSerializer): 
    class Meta: 
     model = Price 
     fields = [ 
      'type', 
      'name', 
      'product', 
      'value', 
     ] 

views.py的API

from rest_framework import generics 
from .serializers import PriceModelSerializer 
from .models import Price 

class PriceListAPIView(generics.ListAPIView): 
     serializer_class = PriceModelSerializer 

    def get_queryset(self): 
      return Price.objects.all().order_by('sort') 

網址。PY的API

urlpatterns = [ 
    #...other urls 
    url(r'^$', PriceListAPIView.as_view(), name='list'), 
] 

模板

<section class="pt100 pb100"> 
    <div class="container"> 
      <div class="vertical-align"> 
       <div class="col-md-12"> 
        <table class="table table-striped"> 
         <thead> 
          <tr> 
           <th>TYPE</th> 
           <th>NAME</th> 
           <th>PRODUCT</th> 
           <th>VALUE</th> 
          </tr> 
         </thead> 
         <tbody> 

         </tbody> 
        </table> 
       </div> 
      </div> 
     </div> 
</section> 

主要urls.py

urlpatterns = [ 
    #...other urls 
    url(r'^api/prices/', include('[LOCATION_OF_YOUR_URLS].urls', namespace='api-prices')), 
] 

AJAX

<script> 

    setInterval(function() { 
     $.ajax({ 
      method: "GET", 
      url: "/api/prices/", 
      success: function(data) { 
       $("tbody").empty(); 
       $.each(data, function (key, value) { 
        var priceKey = key; 
        var priceType = value.type; 
        var priceName = value.name; 
        var priceProduct = value.product; 
        var priceValue = value.value; 
        $("tbody").append(
         "<tr><td>" + priceType + "</td><td>" + priceName + "</td><td>" + priceProduct + "</td><td>" + priceValue + "</td></tr>" 
        ) 
       }) 
      }, 
      error: function(data) { 
       console.log("error") 
       console.log(data) 
      } 
     }) 
    }, 1000) 
</script> 

Answer 2

創建一個django視圖，該視圖返回指定表中的所有行。現在創建一個ajax函數，每隔10秒輪詢django視圖（通過url）。

使用jQuery，你就必須包括像這個jQuery CDN：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js">

現在ajax function（jQuery的AJAX）

var updateTable = $.ajax({ 

       method: "GET", 
       url: "prices/", 


       success: function(data, textStatus, request) { 

       console.log(data) 
       //update your DOM with new data recieved in **data** 

      } 
     }); 

setInterval(updateTable,10000); 

執行此功能的AJAX每10秒。請記住，視圖將返回表格的原始html。這些數據可以在您編寫的ajax函數的成功回調函數中訪問。現在您將不得不使用數據變量中的新表格更新DOM。嘗試從成功回調中運行console.log（數據）以查看服務器的響應。