javascript - 刷新django模板中的数据而不重新加载页面

Question

您好我正在尝试在不刷新页面的情况下将新数据添加到数据库中。我正在使用这个库 chartjs-plugin-streaming 来直播流数据。

我已经尝试使用 ajax 回调到我的 URL，我的视图被称为我的视图获取我的模板我的模型。

视图.py

def live(request):
queryset = Registro.objects.all()
if request.GET.get('ensayo__exact') is not None:
    queryset = queryset.filter(ensayo__exact=request.GET.get('ensayo__exact'))
if request.GET.get('presion') is not None:
    queryset = queryset.filter(presion=request.GET.get('presion'))
if request.GET.get('etapa') is not None:
    queryset = queryset.filter(etapa=request.GET.get('etapa'))
if request.GET.get('fecha__gte') is not None:
    queryset = queryset.filter(fecha__gte=request.GET.get('fecha__gte'))
if request.GET.get('fecha__lte') is not None:
    queryset = queryset.filter(fecha__lte=request.GET.get('fecha__lte'))

presion = [str(obj.presion) for obj in queryset]
etapa = [str(obj.etapa) for obj in queryset]
tempin = [str(obj.tempin) for obj in queryset]
fecha = [str(obj.fecha) for obj in queryset]
fecha__gte = [str(obj.fecha) for obj in queryset]
fecha__lte = [str(obj.fecha) for obj in queryset]
id = [int(obj.id) for obj in queryset]
ensayo_id = [int(obj.ensayo_id) for obj in queryset]

context = {
    'presion': json.dumps(presion),
    'etapa': json.dumps(etapa),
    'tempin': json.dumps(tempin),
    'fecha': json.dumps(fecha),
    'fecha__get': json.dumps(fecha),
    'fecha__lte': json.dumps(fecha),
    'id': json.dumps(id),
    'ensayo_id': json.dumps(ensayo_id)

}
return render(request, 'reporte/live_data.html', context)

这是我在我的模板和呈现 li 的画布中尝试过的 js 函数：

模板.html

        function update() {
        $.get('', '', function() {
            return presion = JSON.parse('{{ presion|safe }}')
        });
    }

    function onRefresh(chart) {
        chart.config.data.datasets.forEach(function(dataset) {
            dataset.data.push({
                x: Date.now(),
                y: update(),
            });
        });
    }


    var color = Chart.helpers.color;
    var config = {
        type: 'line',
        data: {
            labels: fecha,
            datasets: [{
                label: 'Presión (Bar)',
                backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
                borderColor: window.chartColors.blue,
                data: presion,
                fill: true,
            }]
        },
        options: {
            title: {
                display: true,
                text: 'Line chart (hotizontal scroll) sample'
            },
            scales: {
                xAxes: [{
                    type: 'realtime',
                    realtime: {
                        duration: 20000,
                        refresh: 1000,
                        delay: 2000,
                        onRefresh: onRefresh
                    }
                }],
                yAxes: [{
                    scaleLabel: {
                        display: true,
                        labelString: 'value'
                    }
                }]
            },
            tooltips: {
                mode: 'nearest',
                intersect: false
            },
            hover: {
                mode: 'nearest',
                intersect: false
            }
        }
    };

任何想法或帮助？

标签： javascriptpythonajaxdjangodjango-templates