最近在用Echarts实现数据的报表展现;用到了Echarts的异步数据加载,即:后端获得数据后,前端通过ajax取数据展现;
遇到如上所述问题:echarts.js:24938 Uncaught TypeError: Cannot read property '0' of undefined
一开始是图表不展现,通过Chrome浏览器检查后,提示以上错误,首先想到的是访问数组索引时,找不到。
我的代码前端大体是想利用后端返回的json串取数据,对应下面的data
$.ajax({
url: url,
type:'post',
data: postData,
success:function(data){
selectChart.hideLoading();
// 如果data.series.data 为空要进行判断
if (data.categories == null) {
alert('no data under this condition!');
return false;
}// 后面略
经过一番思考后,怀疑data的
类型是不是出错了。
利用alert(typeof data);打印data类型,结果为String类型!!!String啊啊啊啊啊啊,怎么会这样?显然不可能通过索引访问到,查了下jquery的$.ajax方法,
结果是:$.ajax方法中dataType如果不设置,想要返回json格式的数据,就可能会出错(因为类型的判断将会由jQuery自动完成):访问data.attr访问不到;
$.ajax({
url: url,
type:'post',
dataType: "json",
data: postData,
success:function(data){
selectChart.hideLoading();
// 如果data.series.data 为空要进行判断
if (data.categories == null) {
alert('no data under this condition!');
return false;
}
其实我很疑惑,如果我不指定dataType,它默认是什么呢?
搜到的结果是:
dataType类型:String
预期服务器返回的数据类型。如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息来智能判断,比如 XML MIME 类型就被识别为 XML。在 1.4 中,JSON 就会生成一个 JavaScript 对象,而 script 则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后,传递给回调函数。可用值:
- "xml": 返回 XML 文档,可用 jQuery 处理。
- "html": 返回纯文本 HTML 信息;包含的 script 标签会在插入 dom 时执行。
- "script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 "cache" 参数。注意:在远程请求时(不在同一个域下),所有 POST 请求都将转为 GET 请求。(因为将使用 DOM 的 script标签来加载)
- "json": 返回 JSON 数据 。
- "jsonp": JSONP 格式。使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。
- "text": 返回纯文本字符串
点右键检查 - 切换到Network - 刷新页面重新发送请求 - 在左侧Name中找到请求的页面 - 点击后查看Headers - Accept 就是说明接受哪些MIME类型