重新加载表格而不刷新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，我可以将 JSON 用于 AJAX。上一个是刷新整个页面，这个是刷新前端的表格。

我不能说这是否是最佳解决方案，但效果很好。也许有一个更快的。

API

序列化器.py

from rest_framework import serializers
from .models import Price

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

API 的views.py

 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')

用于 API 的 urls.py

 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 视图，返回指定表中的所有行。现在创建一个每 10 秒轮询 django 视图（通过 url）的 ajax 函数。

使用 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);

每 10 秒执行一次这个 ajax 函数。请记住，视图将返回带有表格的原始 html。可以在您编写的 ajax 函数的成功回调函数中访问此数据。现在你必须用 data 变量中的新表来更新你的 DOM。尝试从成功回调内部运行 console.log(data) 以查看服务器的响应。