Question

这可能是一个愚蠢的问题，请耐心等待：

我使用ajax加载一个json文件，然后在高级图表中显示数据：代码如下：

$.ajax({
    cache: false,
    dataType: "json",
    url: "{% static 'money/data/highchartpiesam.json' %}",
    success: function (json) {
        console.log("haha i have read the json")
        console.log('Success', this.url)
        $('#containerHighChartJSONPie').highcharts({
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: 1, //null,
                plotShadow: false
            },
            title: {
                text: 'Expenses per Types of Expenditures'
            },
            tooltip: {
                pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                        style: {
                            color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                        }
                    }
                }
            },
            series: [{
                type: 'pie',
                name: 'Type of Expenditure',
                data: json
            }]
        });
    }
});

此代码效果很好，但如果您在上面的代码中看到网址： url：“{％static'foney / data / highchartpiesam.json'％}” 用户的文件名所以sam的文件是highchartpiesam.json，对于ram是highchartpieram.json等即文件名对于不同的用户将是不同的（根据我的django代码），并且登录的用户名将被附加到工作highchartpie.json

为了完成这项工作我想创建一个url字符串，然后将该字符串放到url：但这似乎不起作用：（

我所做的是将上面的代码更改为以下内容：

$(document).ready(function () {
    console.log("aah document is loaded ")
    console.log("File Name code");
    var a = '{\% static '.concat('\'money/data/highchartpie').concat('{{ user.username }}').concat('.json\'').concat("%}");
    console.log("File Name code : Value of initial string is a is ", a);
    var chartFileName = a;
    $.ajax({

        cache: false,
        dataType: "json",
        url: chartFileName,
        success: function (json) {
            console.log("haha i have read the json")
            console.log('Success', this.url)
            $('#containerHighChartJSONPie').highcharts({
                chart: {
                    plotBackgroundColor: null,
                    plotBorderWidth: 1, //null,
                    plotShadow: false
                },
                title: {
                    text: 'Expenses per Types of Expenditures'
                },
                tooltip: {
                    pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: true,
                            format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                            style: {
                                color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                            }
                        }
                    }
                },
                series: [{
                    type: 'pie',
                    name: 'Type of Expenditure',
                    data: json
                }]
            });
        }
    });
});

我仍然得到connsole.log输出，直到：

“文件名代码：初始字符串的值为a”“{％static'coney / data / highchartpiesam.json'％}”

但之后没有。

有人可以就此提出建议吗？

Answer 1

据推测，此代码位于静态文件夹中某处的.js文件中？ Djangos的模板引擎无法处理这些文件，因此您无法在其中使用任何Django相关逻辑的模板标记。

因此，您需要一种从javascript访问渲染模板变量的方法。一个简单的方法是使用渲染的模板变量在html文件中使用隐藏输入，然后使用jquery从javascript文件中获取该输入的值：

<!-- In HTML file -->
<input id="json_path" type="hidden" value="{% static 'money/data/highchartpiesam.json' %}" />

/* In javascript file */
$(document).ready(function () {
    ...
    $.ajax({
    ...
    url: $("#json_path").val(),
    ...
    })

Answer 2

这不可行。当然你意识到在后端处理模板标签，只有渲染的内容被发送到浏览器？让JS生成一个看起来像模板标签的字符串是没有意义的，因为那时渲染步骤已经过去了。

相反，您需要让Django生成文件的基本路径，并将其余部分添加到JS中。简单如下：

var base_path = '{% static "money/data/" %}';
var user = '{{ user.username }}'
var full_url = [base_path, 'highchartpie', user, '.json'].join('')

将脚本中的变量字符串替换为ajax

2 个答案: