如何成功传递一个 Json 来在 Django 中渲染和操作它？答案

【问题标题】：How to successfully pass a Json to render and manipulate it in Django?如何成功传递一个 Json 来在 Django 中渲染和操作它？
【发布时间】：2018-02-02 03:31:44
【问题描述】：

我正在尝试从 POST 请求返回 Json 响应，但在路径中遇到各种错误。

首先，我有以下观点

class ChartData8(APIView):
    def tickets_per_day_results(request):
        if request.method == "POST":
            template_name = 'personal_website/tickets_per_day_results.html'
            year = request.POST.get('select_year', None)
            week = request.POST.get('select_week', None)
            ....do stuff...
            data = {"label_number_days": label_number_days,
                    "days_of_data": count_of_days}
        return render(request,template_name,JsonResponse(data))

调用包含 Ajax 请求的模板 tickets_per_day_results.html：

$.ajax({
    method: "POST",
    url: endpoint,
    dataType: 'json',
    contentType: "application/json",
    headers: {"X-CSRFToken": $.cookie("csrftoken")},
    success: function(data){
        console.log(data)
        label_number_days = data.label_number_days
        days_of_data = data.days_of_data
        setChart()

    },
    error: function(jqXHR,error_data, errorThrown){
        console.log("error on data")
        console.log(error_data)
        console.log(JSON.stringify(jqXHR))
        console.log("AJAX error: " + error_data + ' : ' + errorThrown)
    }

但是这种组合会引发context must be a dict rather than JsonResponse 错误。

我尝试了各种替代方案：

替代方案 1： 我使用 Response 而不是 JsonResponse，如下所示：

class ChartData8(APIView):
    def tickets_per_day_results(request):
        if request.method == "POST":
            template_name = 'personal_website/tickets_per_day_results.html'
            year = request.POST.get('select_year', None)
            week = request.POST.get('select_week', None)
            ....do stuff...
            data = {"label_number_days": label_number_days,
                    "days_of_data": count_of_days}
        return render(request,template_name,Response(data))

但这抛出了错误context must be a dict rather than Response。

替代方案 2： 我尝试将对象转换为如下所示的字典，而不是 JsonResponse 和 Response：

class ChartData8(APIView):
    def tickets_per_day_results(request):
        if request.method == "POST":
            template_name = 'personal_website/tickets_per_day_results.html'
            year = request.POST.get('select_year', None)
            week = request.POST.get('select_week', None)
            ....do stuff...
            data = {"label_number_days": label_number_days,
                    "days_of_data": count_of_days}
        return render(request,template_name, dict(Response(data)))

但这抛出了错误The response content must be rendered before it can be iterated over。

替代方案 3： 我尝试在没有 JsonResponse 或 Response 的情况下传递数据，而不是 1 和 2：

class ChartData8(APIView):
    def tickets_per_day_results(request):
        if request.method == "POST":
            template_name = 'personal_website/tickets_per_day_results.html'
            year = request.POST.get('select_year', None)
            week = request.POST.get('select_week', None)
            ....do stuff...
            data = {"label_number_days": label_number_days,
                    "days_of_data": count_of_days}
        return render(request,template_name, data)

但这会从 ajax 请求中抛出错误 parsererror，因为这意味着您只需返回一个字符串或另一个值，它并不是真正的 Json，因此解析器在解析它时会失败。您可以通过从 Ajax 请求中删除 dataType:'json' 来避免此错误（来自 parsererror Ajax 的解决方案），但这将不允许我从模板 tickets_per_day_results 操作我的数据集，即

删除dataType:json

$.ajax({
    method: "POST",
    url: endpoint,
    headers: {"X-CSRFToken": $.cookie("csrftoken")},
    success: function(data){
        console.log(data)
        label_number_days = data.label_number_days
        days_of_data = data.days_of_data
        setChart()

    },
    error: function(jqXHR,error_data, errorThrown){
        console.log("error on data")
        console.log(error_data)
        console.log(JSON.stringify(jqXHR))
        console.log("AJAX error: " + error_data + ' : ' + errorThrown)
    }

那么我无法操作位于 Ajax 请求下方的数据集：

data: {
        labels: label_number_days,
        datasets :
            [{
                label: 'User_001',
                data [days_of_data[0],days_of_data[1],days_of_data[2],days_of_data[3],days_of_data[4],days_of_data[5],days_of_data[6]],
                backgroundColor: 'rgba(255, 99, 132, 0.6)',
                borderColor: '#777',
                borderWidth: 1,
                hoverBorderWidth: 3,
                hoverBorderColor: '#000'
            },

因为你找到了Uncaught TypeError: Cannot read property '0' of undefined。

这是一条乏味的道路，我已经没有想法（和耐心）了。如果有人可以建议我任何其他选择，那么这将使我的健康得到一些缓解。

更新 每日票数结果 html 文件

{% extends "personal_website/header.html"%}

<script>
{% block jquery %}

var endpoint = '/tickets_per_day_results/' //This works with the chart_data view.

var days_of_data = []
var label_number_days = []

$.ajax({
    method: "POST",
    url: endpoint,
    dataType: 'json',
    contentType: "application/json",
    headers: {"X-CSRFToken": $.cookie("csrftoken")},
    success: function(data){
        console.log(data)
        label_number_days = data.label_number_days
        days_of_data = data.days_of_data
        setChart()

    },
    error: function(jqXHR,error_data, errorThrown){
        console.log("error on data")
        console.log(error_data)
        console.log(JSON.stringify(jqXHR))
        console.log("AJAX error: " + error_data + ' : ' + errorThrown)
    }
})
function setChart()
{var ctx_tickets_per_day       = document.getElementById("tickets_per_day")

var tickets_per_day = new Chart(ctx_tickets_per_day, {
    showTooltips: false,
    type:'bar',
    data: {
        labels: label_number_days,
        datasets :
            [{
                label: 'Oscar Gil',
                data: [days_of_data[0],days_of_data[1],days_of_data[2],days_of_data[3],days_of_data[4],days_of_data[5],days_of_data[6]],
                backgroundColor: 'rgba(255, 99, 132, 0.6)',
                borderColor: '#777',
                borderWidth: 1,
                hoverBorderWidth: 3,
                hoverBorderColor: '#000'
            },
            {
                label: 'Oscar Rodriguez',
                data: [days_of_data[7],days_of_data[8],days_of_data[9],days_of_data[10],days_of_data[11],days_of_data[12],days_of_data[13]],
                backgroundColor: 'rgba(54, 162, 235, 0.6)',
                borderColor: '#777',
                borderWidth: 1,
                hoverBorderWidth: 3,
                hoverBorderColor: '#000'
            },

            {
                label: 'Animesh Rathore',
                data: [days_of_data[14],days_of_data[15],days_of_data[16],days_of_data[17],days_of_data[18],days_of_data[19],days_of_data[20]],
                backgroundColor: 'rgba(255, 206, 86, 0.6)',
                borderColor: '#777',
                borderWidth: 1,
                hoverBorderWidth: 3,
                hoverBorderColor: '#000'
            },

            {
                label: 'Bhaskar Sharma',
                data: [days_of_data[21],days_of_data[22],days_of_data[23],days_of_data[24],days_of_data[25],days_of_data[26],days_of_data[27]],
                backgroundColor: 'rgba(75, 192, 192, 0.6)',
                borderColor: '#777',
                borderWidth: 1,
                hoverBorderWidth: 3,
                hoverBorderColor: '#000'
            },

            {
                label: 'Victor Catacora',
                data: [days_of_data[28],days_of_data[29],days_of_data[30],days_of_data[31],days_of_data[32],days_of_data[33],days_of_data[34]],
                backgroundColor: 'rgba(153, 102, 255, 0.6)',
                borderColor: '#777',
                borderWidth: 1,
                hoverBorderWidth: 3,
                hoverBorderColor: '#000'
            },

            {
                label: 'Jimmy Gonzalez',
                data: [days_of_data[35],days_of_data[36],days_of_data[37],days_of_data[38],days_of_data[39],days_of_data[40],days_of_data[41]],
                backgroundColor: 'rgba(236, 115, 9, 1)',
                borderColor: '#777',
                borderWidth: 1,
                hoverBorderWidth: 3,
                hoverBorderColor: '#000'
            },

            {
                label: 'Piyush Gupta',
                data: [days_of_data[42],days_of_data[43],days_of_data[44],days_of_data[45],days_of_data[46],days_of_data[47],days_of_data[48]],
                backgroundColor: 'rgba(185, 29, 12, 0.6)',
                borderColor: '#777',
                borderWidth: 1,
                hoverBorderWidth: 3,
                hoverBorderColor: '#000'
            },

            {
                label: 'Carlos Prieto',
                data: [days_of_data[49],days_of_data[50],days_of_data[51],days_of_data[52],days_of_data[53],days_of_data[54],days_of_data[55]],
                backgroundColor: 'rgba(105, 129, 64, 0.6)',
                borderColor: '#777',
                borderWidth: 1,
                hoverBorderWidth: 3,
                hoverBorderColor: '#000'
            },

            {
                label: 'Daniel Estrada',
                data: [days_of_data[56],days_of_data[57],days_of_data[58],days_of_data[59],days_of_data[60],days_of_data[61],days_of_data[62]],
                backgroundColor: 'rgba(15,  199, 84, 0.6)',
                borderColor: '#777',
                borderWidth: 1,
                hoverBorderWidth: 3,
                hoverBorderColor: '#000'
            },

            ]
        },
        options: {
          scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
          },

          title: {
            display: true,
            text: 'Tickets by engineer per day',
            fontSize: 30
            },
        legend: {
            position: 'right',
            display: true,
            labels: {
                fontColor: '#000'
                }
            },
            layout: {
                padding: {
                    left: 50,
                    right: 0,
                    bottom: 0,
                    top: 0
                    }
            },
            tooltips: {
              enabled: true
            },

          hover : {
            animationDuration: 0
          },

          animation: {
            duration: 0.8,
            onComplete: function(){
                var chartInstance = this.chart,
                ctx = chartInstance.ctx;
                Chart.defaults.global.defaultFontColor = '#777';
                ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize,
                           Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
                ctx.textAlign = 'center';
                ctx.textBaseline = 'bottom';

                this.data.datasets.forEach(function (dataset, i) {
                var isHidden = dataset._meta[0].hidden; //'hidden' property of dataset
                if (!isHidden) { //if dataset is not hidden
                    var meta = chartInstance.controller.getDatasetMeta(i);
                    meta.data.forEach(function (bar, index) {
                        var data = dataset.data[index];
                        ctx.fillText(data, bar._model.x, bar._model.y - 5);});
                    }});
            }
          }
        }
    })
}

{% endblock %}

    {% block content %}

<div class ='row'>

    {% csrf_token %}
<div class="col-sm-12" url-endpoint='{% url "tickets_per_day_results" %}'>
        <div>
            <canvas id="tickets_per_day" width="800" height="500"></canvas>
        </div>
</div>
</div>
 {% endblock content %}

【问题讨论】：

标签： jquery json ajax django python-3.x

【解决方案1】：

我认为您在以 JSON 格式返回数据时使用了错误的方法。在代码中：

render(request,template_name,JsonResponse(data))

在 Django here 的文档中。渲染快捷方式用于渲染带有字典数据的 Html 模板以更新页面。

根据 django 代码，我猜你使用的是 Django rest 框架。为了发送 JSON 数据，您应该使用此处的示例 DRF example response 以便将 JSON 数据发送到页面。

【讨论】：

但是如何用模板渲染数据呢？
为了呈现模板中的数据，您必须删除 JsonResponse(data)，并只放置数据。
问题是，如果我只放data，那么我会遇到parsererror 问题，为了避免这种情况，我必须删除dataType: 'json，这样做会导致Uncaught TypeError: Cannot read property '0' of undefined
您能否分享您的模板“personal_website/tickets_per_day_results.html”来看看。
好的，我看的更清楚了，您正在通过 ajax 调用使用 post 方法。并且您不应该使用 render 作为请求的返回。在您完成的 post 方法上直接使用“return JsonResponse(data)”