1

我有以下代码：

$.ajax({
    async: false,
    url: 'chart_data.php',
    data: {'option':'high', 'id':id},
    dataType: 'json',
    success: function(response){
        alert('in');
        var data = google.visualization.arrayToDataTable(response);
        var options= { curveType:'none', width: 300, height: 200, hAxis: {title:'Years'}, vAxis: {title:'Value'}, title: 'High Time - Low Value' };
        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, options);  
    }
});

在一个网页中。我希望基于下拉菜单显示图表。该功能的其余部分工作得很好。我检查了 Firebug，JSON 响应带有 200 OK 状态消息。事实上，我可以在 Firebug 中看到所有的 JSON。

问题仍然存在，为什么alert('in');永远不会触发，为什么谷歌不将它的图表加载到相关的图表 div 中？

编辑：

添加错误回调时出现以下错误：parseerror SyntaxError：JSON.parse：意外字符。

这是来自服务器的 JSON 响应：

[['Year', 'Low', 'High'],['1984', 318000, 395000],['1984', 418000, 495000],
['1984', 380000, 450000],['1984', 410000, 460000],['1984', 410000, 460000],
['1985', 435000, 485000],['1985', 435000, 485000],['1985', 435000, 485000],
['1985', 435000, 485000],['1985', 435000, 485000],['1985', 435000, 485000],
['1985', 435000, 485000],['1985', 435000, 485000],['1985', 318000, 395000],
['1985', 418000, 495000],['1985', 380000, 450000],['1985', 420000, 470000],
['1985', 420000, 470000]]

它看起来对我来说是正确的，虽然我不是 100% 确定 JSON 结构。

编辑：

我做了一些改变，似乎我走得更远了。首先，我header('Content-type: application/json');从我的 php 脚本中删除了该行。然后我将其更改dataType: 'json'为dataType: 'html'.

它现在在 $.ajax() 调用中加载成功回调。当我尝试将其发送到 Google 的 arrayToDataTable() 方法时，它不喜欢文本响应。

如果我可以将返回的字符串（看起来像上面的 JSON 响应，实际上不是 JSON 响应）解析为 javascript 数组，那么我会很高兴。我希望。

编辑：

我最终在我的成功回调中使用了一个 eval 语句将 http 响应转换为一个数组eval('var res = ' + response);。这可能不是最好的方法。如果有人有更好（更安全）的方式来做到这一点，那就太好了。

编辑：

我不太喜欢使用 eval 语句，所以我研究了将返回字符串更改为数组的其他方法。在遇到这个小宝石之前，我并没有真正关心他们中的任何一个：

response = JSON.parse(response);

这没有问题。

感谢大家的帮助。

4

2 回答 2

1

您的 JSON 格式存在错误，字符串必须是双引号 (") 而不是单引号 (')

如果你想检查你的 JSOn 是否有效，你可以使用这个

于 2012-06-20T20:25:06.250 回答
1

好的，还没有人回答，所以我会在这里试一试。看起来您已经更新了一条错误消息以及您从 ajax 调用获得的返回值。

问题是您收到的不是 JSON 对象，而是 javascript 数组。JSON 对象将包含在大括号 { 和 } 中，而数组则包含在方括号 [ 和 ] 中。

您应该修改您通过 ajax 调用的脚本，以便它返回正确的 JSON 对象（在 php 中使用json_encode非常方便）。

你会希望你的回复看起来更像这样：

{"data":[["Year", "Low", "High"],["1984", 318000, 395000],["1984", 418000, 495000],
["1984", 380000, 450000],["1984", 410000, 460000],["1984", 410000, 460000],
["1985", 435000, 485000],["1985", 435000, 485000],["1985", 435000, 485000],
["1985", 435000, 485000],["1985", 435000, 485000],["1985", 435000, 485000],
["1985", 435000, 485000],["1985", 435000, 485000],["1985", 318000, 395000],
["1985", 418000, 495000],["1985", 380000, 450000],["1985", 420000, 470000],
["1985", 420000, 470000]]}

根据google，他们正在寻找这样的东西：

{
   cols: [{id: 'task', label: 'Task', type: 'string'},
          {id: 'hours', label: 'Hours per Day', type: 'number'}
   ],
   rows: [{c:[{v: 'Work'}, {v: 11}]},
          {c:[{v: 'Eat'}, {v: 2}]},
          {c:[{v: 'Commute'}, {v: 2}]},
          {c:[{v: 'Watch TV'}, {v:2}]},
          {c:[{v: 'Sleep'}, {v:7, f:'7.000'}]}
   ]
 }

那么，也许您实际上需要重新处理数据以首先遵循此结构？像这样的东西：

{
  "cols": [{"id":"year", "label":"Year", "type":"string"},
         {"id":"low",  "label":"Low",  "type":"string"},
         {"id":"high", "label":"High", "type":"string"}],
  "rows": [{"c":[{"v":"1984"}, {"v":"318000"}, {"v":"395000"}]},
         {"c":[{"v":"1984"}, {"v":"418000"}, {"v":"495000"}]},
         {"c":[{"v":"1984"}, {"v":"380000"}, {"v":"450000"}]},
         {"c":[{"v":"1985"}, {"v":"420000"}, {"v":"470000"}]}]
}

如果 JSON 看起来有点混乱，您可以在此处阅读更多信息：http: //www.json.org/

编辑

考虑到我忽略了 .arrayToDataTable() 函数调用，我想我应该从谷歌的文档中引用这个例子（上面已经引用了链接）：

// Version 1: arrayToDataTable method
var data2 = google.visualization.arrayToDataTable([
  ['Country', 'Population', 'Area'],
  ['CN', 1324, 9640821],
  ['IN', 1133, 3287263],
  ['US', 304, 9629091],
  ['ID', 232, 1904569],
  ['BR', 187, 8514877]
]);

由于您的阵列是这样进来的：

[['Year', 'Low', 'High'],
 ['1984', 318000, 395000],
 ['1984', 418000, 495000],
 ['1984', 380000, 450000],
 ['1984', 410000, 460000],
 ['1984', 410000, 460000],
 ['1985', 435000, 485000],
 ['1985', 435000, 485000],
 ['1985', 435000, 485000],
 ['1985', 435000, 485000],
 ['1985', 435000, 485000],
 ['1985', 435000, 485000],
 ['1985', 435000, 485000],
 ['1985', 435000, 485000],
 ['1985', 318000, 395000],
 ['1985', 418000, 495000],
 ['1985', 380000, 450000],
 ['1985', 420000, 470000],
 ['1985', 420000, 470000]]

看起来格式正确，我认为您应该尝试将 ajax 调用中的“dataType”更改为“text”而不是“json”，因为您实际上返回的是一个数组而不是 JSON 对象。这应该可以解决您的问题。

于 2012-06-15T16:16:08.090 回答