Djangoのページを更新せずにテーブルをリロードする

Question

10秒ごとに新しいデータを更新する必要がある小さなテーブルを用意してください。 Webサイト全体がDjangoで動作しています。 JSONはデータを1つのテーブルに解析し、10秒ごとにデータをデータベースに書き換えます。ウェブサイトはデータベースからデータを表示しています。私が必要とする手順は、フロントエンドテーブルを10秒ごとに新しいデータでリフレッシュすることです。これはAJAXと仮定して、コードを書く手助けはできますか？テーブルにデータを追加することはありません。ちょうどそれをリフレッシュしてください。

例 - データベースのテーブルには10行のデータが固定されており、JSONによって更新されています。フロントエンドは常に10行を表示するので、10秒ごとにテーブル（フロントエンド）は常に新しいデータで10行を表示します。

Djangoのバージョンここでは1.11

は

views.py

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

prices.html Pythonのファイルがある

<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フレームワークとAJAXでこれを実現しました。ビューでそれを行う方法がわからないので、私はRESTを使用しました。 RESTを使用することで、JSONをAJAXに使用することができます。前の答えはページ全体をリフレッシュしていますが、これはフロントエンドのテーブルをリフレッシュしています。

私はこれが最高の解決策であるとは言えませんが、それは素晴らしいです。たぶん、はるかに速いものがあります。

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

URLの

from rest_framework import serializers 
from .models import Price 

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

views.py

serializers.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ビューを作成します。 djangoビューを（URLを介して）10秒ごとにポーリングする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関数の成功したコールバック関数でアクセス可能になります。今度は、データに入っている新しいテーブルでDOMを更新する必要があります。成功のコールバックからconsole.log（data）を実行して、サーバーによる応答を確認してください。