刷新Django模板中的数据而无需重新加载页面

时间:2019-01-27 01:10:26

标签: javascript python ajax django django-templates

嗨,我正在尝试将新数据添加到DB中,而不刷新页面。我正在使用这个库chartjs-plugin-streaming实时传输数据。

我已经尝试过用ajax回调到URL,直到视图被调用 我的视图进入我的模型模板。

view.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函数:

template.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
            }
        }
    };

有什么想法或帮助吗?

0 个答案:

没有答案