gpt4 book ai didi

javascript - getJSON 方法不起作用

转载 作者:行者123 更新时间:2023-12-02 18:07:34 26 4
gpt4 key购买 nike

下面是我的代码,其中 getJSON 方法不起作用

 function loadJson() {
$(document).ready(function () {
alert("inside");
var chart;
var url = "values.json";
var seriesData = [];
var xCategories = [];
var i, cat;
alert("outside");
$.getJSON(url, function (data) {
alert("inside JSON function");
for (i = 0; i < data.length; i++) {
cat = '' + data[i].period_name;
if (xCategories.indexOf(cat) === -1) {
xCategories[xCategories.length] = cat;
}
}
for (i = 0; i < data.length; i++) {
if (seriesData) {
var currSeries = seriesData.filter(function (seriesObject) {
return seriesObject.name == data[i].series_name;
}
);
if (currSeries.length === 0) {
seriesData[seriesData.length] = currSeries = { name: data[i].series_name, data: [] };
} else {
currSeries = currSeries[0];
}
var index = currSeries.data.length;
currSeries.data[index] = data[i].period_final_value;
}
else {
seriesData[0] = { name: data[i].series_name, data: [data[i].period_final_value] }
}
}

//var chart;
//$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar'
},
title: {
text: 'Stacked column chart'
},
xAxis: {
categories: xCategories
},
yAxis: {
//min: 0,
//max: 100,
title: {
text: 'Total fruit consumption'
},
stackLabels: {
enabled: false,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: -100,
verticalAlign: 'top',
y: 20,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
formatter: function () {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>'
}
},

series: seriesData


});
});

});
}

在 url 中,values.json 是我的 JSON 文件,如下

[{"series_name":"Actual","period_name":"Q1 / 2013","period_final_value":17},
{"series_name":"Actual","period_name":"Q2 / 2013","period_final_value":15},
{"series_name":"Actual","period_name":"Q3 / 2013","period_final_value":13},
{"series_name":"Actual","period_name":"Q4 / 2013","period_final_value":19},

{"series_name":"Alarm","period_name":"Q1 / 2013","period_final_value":14.103},
{"series_name":"Alarm","period_name":"Q2 / 2013","period_final_value":14.404499999999999},
{"series_name":"Alarm","period_name":"Q3 / 2013","period_final_value":14.966999999999999},
{"series_name":"Alarm","period_name":"Q4 / 2013","period_final_value":50},

{"series_name":"Target","period_name":"Q1 / 2013","period_final_value":15.67},
{"series_name":"Target","period_name":"Q2 / 2013","period_final_value":16.005},
{"series_name":"Target","period_name":"Q3 / 2013","period_final_value":16.63},
{"series_name":"Target","period_name":"Q4 / 2013","period_final_value":100}]

文件呈现,但数据未显示在图表上,只有 getJSON 方法外部的警报有效,内部的警报不起作用,如果我尝试从 html 页面运行相同的代码,那么它可以正常工作,但现在我已经编写了整个代码与 ASP.NET Web 应用程序中的 VS 中的代码相同,我在 JavaScript 中调用了 body onLoad 上的 loadJson 函数,如下所示,

<body onload="loadJson();">

但是该方法没有运行,无法解决这个问题,任何帮助将不胜感激......

----------额外工作------

当我将 JSON 数据添加到 getJSON 方法上方的任何变量中并消除 getJSON 方法并访问时,我可以正确获取图表,但是当我使用 getJSON 方法时,它不起作用

-----检查错误----------

我检查了chrome中的错误,我知道它无法获取json文件,我已将JSON文件保存在项目文件夹中,然后我也尝试将json文件保存在localhost中,仍然是一样的错误..

现在我想我遇到了 aspx 页面的 mime 类型处理问题..有什么可以与之链接的吗..??

最佳答案

1) 确保您使用有效的 json:www.jsonlint.com

2) 在本地主机上运行 json 文件。如果您在浏览器上看到在 localhost 上运行的 json 文件,请告诉我。确保您的 web.config 中有此内容

  <system.webServer>
<staticContent>
<mimeMap fileExtension=".json" mimeType="application/json" />
</staticContent>
</system.webServer>

3)使用getJSON函数的警报信息

$(document).ready(function () {
$.getJSON("values.json", function (data) {
$.each(data, function () {
alert(this.series_name);
});
});
});

4) 当您通过这些测试后,继续构建您的 jQuery 代码。

关于javascript - getJSON 方法不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19976153/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com