Jquery 如何成功地传递Json以在Django中呈现和操作它？

我试图从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\u per\u day\u 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)
    }

但这种组合使我联想到

上下文必须是dict而不是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))

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

但这抛出了错误

上下文必须是dict而不是Response

备选方案2:我尝试将对象转换为dict，而不是

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,Response(data))

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

但是这抛出了一个错误

，必须先呈现响应内容，然后才能对其进行迭代

备选方案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请求中的错误
parserror
，因为这意味着您只需返回一个字符串或另一个值，它实际上不是
Json
，因此解析器在解析它时失败。您可以通过从Ajax请求（解决方案）中删除
数据类型：'json'
来避免此错误，但这将不允许我从模板每天的票证结果中操作数据集，即

删除
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'
            },

因为您发现
未捕获类型错误：无法读取未定义的
的属性“0”

这是一条乏味的道路，我的想法（和耐心）都快用完了。如果有人能建议我其他的选择，那将给我一些健康上的安慰

更新
每日门票结果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 %}

{%extends“personal_website/header.html”%}
{%block jquery%}
var endpoint='/tickets\u per\u day\u results/'//这适用于图表数据视图。
风险值天数（单位数据）=[]
var标签\u编号\u天数=[]
$.ajax({
方法：“张贴”，
url:endpoint，
数据类型：“json”，
contentType:“应用程序/json”，
标题：{“X-CSRFToken”：.cookie（“CSRFToken”）}，
成功：功能（数据）{
console.log（数据）
label\u number\u days=data.label\u number\u days
数据的天数=数据。数据的天数
设定图（）
},
错误：函数（jqXHR、错误数据、错误抛出）{
console.log（“数据错误”）
console.log（错误\u数据）
log（JSON.stringify（jqXHR））
log（“AJAX错误：+error\u data+：”+errorshown）
}
})
函数集图表（）
{var ctx_tickets_per_day=document.getElementById（“tickets_per_day”）
var tickets_per_day=新图表（ctx_tickets_per_day{
showTooltips:false，
类型：'bar'，
数据：{
标签：标签天数，
数据集：
[{
标签：“奥斯卡·吉尔”，
数据：[数据天数[0]、数据天数[1]、数据天数[2]、数据天数[3]、数据天数[4]、数据天数[5]、数据天数[6]，
背景颜色：“rgba（255,99,132,0.6）”，
边框颜色：'#777'，
边框宽度：1，
悬停边界宽度：3，
悬停边框颜色：“#000”
},
{
标签：“奥斯卡·罗德里格斯”，
数据：[数据天数[7]、数据天数[8]、数据天数[9]、数据天数[10]、数据天数[11]、数据天数[12]、数据天数[13]，
背景颜色：“rgba（54162235,0.6）”，
边框颜色：'#777'，
边框宽度：1，
悬停边界宽度：3，
悬停边框颜色：“#000”
},
{
标签：“Animesh Rathore”，
数据：[数据天数[14]、数据天数[15]、数据天数[16]、数据天数[17]、数据天数[18]、数据天数[19]、数据天数[20]，
背景颜色：“rgba（255206860.6）”，
边框颜色：'#777'，
边框宽度：1，
悬停边界宽度：3，
悬停边框颜色：“#000”
},
{
标签：“Bhaskar Sharma”，
数据：[数据天数[21]、数据天数[22]、数据天数[23]、数据天数[24]、数据天数[25]、数据天数[26]、数据天数[27]，
背景颜色：“rgba（751921920.6）”，
边框颜色：'#777'，
边框宽度：1，
悬停边界宽度：3，
悬停边框颜色：“#000”
},
{
标签：“维克多·卡塔科拉”，
数据：[数据天数[28]、数据天数[29]、数据天数[30]、数据天数[31]、数据天数[32]、数据天数[33]、数据天数[34]，
背景颜色：“rgba（153102255,0.6）”，
边框颜色：'#777'，
边框宽度：1，
悬停边界宽度：3，
悬停边框颜色：“#000”
},
{
标签：“吉米·冈萨雷斯”，
数据：[数据天数[35]、数据天数[36]、数据天数[37]、数据天数[38]、数据天数[39]、数据天数[40]、数据天数[41]，
背景颜色：“rgba（236115，9，1）”，
边框颜色：'#777'，
边框宽度：1，
悬停边界宽度：3，
悬停边框颜色：“#000”
},
{
标签：“Piyush Gupta”，
数据：[数据天数[42]，数据天数[43]，数据天数[44]，数据天数[45]，数据天数[46]，数据天数[47]，数据天数[48]，
背景颜色：“rgba（185,29,12,0.6）”，
边框颜色：'#777'，
边框宽度：1，
悬停边界宽度：3，
悬停边框颜色：“#000”