Javascript 在Django中重新加载表而不刷新页面

有一个小表格，需要每10秒更新一次新数据。整个网站都在Django工作。JSON将数据解析到一个表中，并在数据库中每隔10秒重写一次数据。该网站正在显示数据库中的数据。我需要的过程是每10秒用新数据刷新一次前端表——这将是我假设的AJAX，你能帮我为它编写代码吗？它不会将数据追加到表中，只是不断刷新它

示例-数据库中的表有固定的10行数据，并由JSON刷新。前端将始终显示10行，因此每10秒，表（前端）将始终显示10行新数据

Django版本1.11

下面是python文件

views.py prices.html

---

创建一个django视图，返回指定表中的所有行。现在创建一个ajax函数，它每10秒轮询一次django视图（通过url）

使用jquery，您必须像这样包括jquery cdn：

现在是

ajax函数（jqueryajax）

每10秒执行一次ajax函数。请记住，视图将随表返回原始html。这些数据可以在您编写的ajax函数的成功回调函数中访问。现在，您必须使用data变量中的新表更新DOM。尝试从内部成功回调运行console.log（数据），以查看服务器的响应。
我已经使用Django REST框架和AJAX完成了这项工作，上面给出了一个提示。我不确定如何在视图中执行此操作，因此使用了REST。通过使用REST，我可以将JSON用于AJAX。前面的答案是刷新整个页面，这个答案是刷新前端的表

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

原料药

序列化程序.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')

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

API的URL.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')

 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>

阿贾克斯


setInterval（函数（）{
$.ajax({
方法：“获取”，
url:“/api/prices/”，
成功：功能（数据）{
$（“tbody”）.empty（）；
$。每个（数据、函数（键、值）{
var-priceKey=key；
var priceType=value.type；
var priceName=value.name；
var priceProduct=value.product；
var priceValue=value.value；
$（“tbody”）.append(
“”+priceType+“”+priceName+“”+priceProduct+“”+priceValue+“”
)
})
},
错误：函数（数据）{
console.log（“错误”）
console.log（数据）
}
})
}, 1000)
这就是我要问的，我有一个返回所有行的视图，这是上面的问题，我不知道如何编写ajax函数来更新html前端表，这就是我要找的。我如何每10秒执行一次ajax函数？很抱歉，我是ajax新手，如果您能用完整的代码更新答案，那将非常有帮助。谢谢。如果我理解正确，这个ajax调用将访问整个/prices/页面，因此数据是包含所有元素的整个HTML页面，而不仅仅是价格表，我只想从views.py“prices=price.objects.all（）.order_by（'id'）”中获取这些数据并更新表，通过ajax调用，它将输出整个页面，其中包含我在该页面上拥有的所有元素，这些元素非常多……在这种情况下，您不需要使用模板，您可以通过视图直接返回json响应，而不是返回呈现对象<代码>从django.http导入JsonResponse

，然后在视图中将模型对象序列化为json-让我们来看看。

 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>

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

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