刷新表格而不刷新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（数据）以查看服务器的响应。