Tenga una tabla pequeña que debe actualizarse cada 10 segundos con nuevos datos. Todo el sitio web funciona en Django. JSON está analizando datos en 1 tabla y reescribiendo los datos cada 10 segundos en la base de datos. El sitio web muestra los datos de la base de datos. El procedimiento que necesito es actualizar la tabla de front-end con nuevos datos cada 10 segundos; supongo que sería el AJAX, ¿puede ayudarme a escribir el código? No agregaría datos a la tabla, solo sigue actualizándolos.
Ejemplo: la tabla en la base de datos ha corregido 10 filas de datos y JSON la está actualizando. El front-end siempre mostraría 10 filas, por lo que cada 10 segundos, la tabla (front-end) siempre mostraría 10 filas con los nuevos datos.
Django versión 1.11
Aquí están los archivos de Python
def prices(request): prices = Price.objects.all().order_by('id') return render(request, 'prices.html', {'prices':prices}) <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> urlpatterns = [ url(r'^prices/', product_views.prices, name='prices'), url(r'^admin/', admin.site.urls), ]He logrado esto con Django REST Framework y AJAX con una pista anterior. No estaba seguro de cómo hacerlo en las vistas, así que usé REST. Al usar REST tengo JSON para usar para AJAX. La respuesta anterior está actualizando toda la página, esta está actualizando la tabla en el front-end.
No puedo decir si esta es la mejor solución, pero está funcionando muy bien. Quizá haya uno mucho más rápido.
API
serializadores.py
from rest_framework import serializers from .models import Price class PriceModelSerializer(serializers.ModelSerializer): class Meta: model = Price fields = [ 'type', 'name', 'product', 'value', ]vistas.py para 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')urls.py para API
urlpatterns = [ #...other urls url(r'^$', PriceListAPIView.as_view(), name='list'), ]modelo
<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>URL principal.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>Cree una vista Django que devuelva todas las filas en la tabla especificada. Ahora cree una función ajax que sondee la vista de Django (a través de una URL) cada 10 segundos.
Use jquery, tendría que incluir jquery cdn así:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js">
Ahora la 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);Ejecute esta función ajax cada 10 segundos. Recuerde que la vista devolverá html sin procesar con la tabla. Se podrá acceder a estos datos en la función de devolución de llamada exitosa de la función ajax que escribió. Ahora tendría que actualizar su DOM con la nueva tabla que obtuvo en la variable de datos . Intente ejecutar console.log (datos) desde el interior de la devolución de llamada exitosa para ver la respuesta del servidor.