当我从后台中传输json 对象到前端,我打算把它直接传递给使用的变量,然后使用.可是不管我是用对象(lineObjectA) 的graphData属性包住,还是会弹出 graphData is undefied . 而获取不到数据,而且我还遇到了一个现象,当我用firefox 的firedug 一步一步地跟踪时候,它却能正常运行,但只要我已关闭调试工具,依然是现实undeified 数据. 之前我也遇到过类似的问题,是运行顺序,但这次不管我 关闭哪一部,谁先执行还是不行.
/**
* 初始化数据 获得数据.
* @param dataString 连接地址
*
*/
function initData_getData() {
"use strict";
var sbID = $("#eChart1").attr("sbID");
var getData;
$.ajax({
url: "chart/EquipmentData",
Type: "GET",
data: "sbID=" + lineObjectA.SbID + "&chartType=1&UpdateInterval=" + frequent + "&CsID=" + lineObjectA.CsID,
dataType: "json",
success: function (jsonData1) {
getData =jsonData1;
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
clearTimeout(timeTicket);
chart.showLoading({
text: "获取不到" + chartName + "数据"
});
}
});
return getData;
}
/**
* chart控件初始化数据
* @Param chartName : 要初始化的元素名,
* @Param unit: 获得单位
* @Param target 考核指标
* @Param data 数据
*/
var dataQuantity =35;
function EchartInit() {
"use strict";
var graphData =[];
try{
var cishu =0;
graphData = initData_getData();
dataQuantity = graphData.length;
chart.setOption({
theme: 'default',
loading: {
text: "Loading "
},
tooltip: {
trigger: 'axis'
},
title: {
text: lineObjectA.chartName + "图表显示",
subtext: lineObjectA.unit
},
legend: {
data:[lineObjectA.chartName.toString()]
},
toolbox: {
show: true,
feature: {
mark: {show: true},
dataView: {show: true, readOnly: true},
magicType: {show: true, type: ['line', 'bar']},
saveAsImage: {show: true}
}
},
xAxis: [
{
type: 'category',
boundaryGap: false, //是否有前后的空余
splitNumber: 50,
power: 5,
precision: 2,
scale: true,
data: (function () {
var res = [];
var lenB =35;
for(var i= 0;i<dataQuantity;i++) {
console.log("i:"+i+"data:"+graphData[i].dateTime)
res.push(graphData[i].dateTime);
}
return res;
})()
}
],
yAxis: [
{
scale: true,
type: 'value',
precision: 2,
axisLabel: {
formatter:'{value}'+lineObjectA.unit
}
}
],
series: [
{
name: lineObjectA.chartName,
type: 'line',
data: (function () {
var res = [];
var len =0;
len= lineObjectA.graphData.length -1;
for(var i=0;i<dataQuantity; i++){
res.push(graphData[i].zhi - 0);
}
return res;
})()
},
{
name: lineObjectA.chartName + '考核指标',
type: 'line',
itemStyle: {
normal: {
lineStyle: {
type: 'dashed'
}
}
},
data: (function () {
var res = [];
for(var i=0;i<dataQuantity;i++){
res.push(lineObjectA.target);
}
return res;
})()
}
]
});
}
catch(e){
stopJGrid();
console.log(e);
console.log(e.stack);
}
// updateData();
chart.hideLoading();
}
json代码:
json代码:
[{"dateTime":"2014-12-09 17:04:57","id":179377,"quality":"Good NonSpecific","zhi":23.45347},{"dateTime":"2014-12-09 17:03:58","id":179202,"quality":"Good NonSpecific","zhi":4.858547},{"dateTime":"2014-12-09 17:02:57","id":179027,"quality":"Good NonSpecific","zhi":44.39833},{"dateTime":"2014-12-09 17:01:59","id":178852,"quality":"Good NonSpecific","zhi":15.28367},{"dateTime":"2014-12-09 17:00:58","id":178677,"quality":"Good NonSpecific","zhi":18.86044},{"dateTime":"2014-12-09 16:04:58","id":168877,"quality":"Good NonSpecific","zhi":69.85076},{"dateTime":"2014-12-09 16:03:57","id":168702,"quality":"Good NonSpecific","zhi":43.72997},{"dateTime":"2014-12-09 16:02:58","id":168527,"quality":"Good NonSpecific","zhi":45.94257},{"dateTime":"2014-12-09 16:01:57","id":168352,"quality":"Good NonSpecific","zhi":63.77453},{"dateTime":"2014-12-09 16:00:58","id":168177,"quality":"Good NonSpecific","zhi":12.62246},{"dateTime":"2014-12-09 15:04:00","id":1814,"quality":"100","zhi":22.0069},{"dateTime":"2014-12-09 15:03:00","id":1813,"quality":"100","zhi":20.82888},{"dateTime":"2014-12-09 15:02:00","id":1812,"quality":"100","zhi":53.26395},{"dateTime":"2014-12-09 15:01:00","id":1811,"quality":"100","zhi":51.22837},{"dateTime":"2014-12-09 15:00:00","id":1810,"quality":"100","zhi":86.25446},{"dateTime":"2014-12-09 14:04:00","id":1754,"quality":"100","zhi":90.06317},{"dateTime":"2014-12-09 14:03:00","id":1753,"quality":"100","zhi":47.93542},{"dateTime":"2014-12-09 14:02:00","id":1752,"quality":"100","zhi":61.04922},{"dateTime":"2014-12-09 14:01:00","id":1751,"quality":"100","zhi":21.13102},{"dateTime":"2014-12-09 14:00:00","id":1750,"quality":"100","zhi":33.48796},{"dateTime":"2014-12-09 13:04:00","id":1694,"quality":"100","zhi":25.00992},{"dateTime":"2014-12-09 13:03:00","id":1693,"quality":"100","zhi":7.895138},{"dateTime":"2014-12-09 13:02:00","id":1692,"quality":"100","zhi":1.379437},{"dateTime":"2014-12-09 13:01:00","id":1691,"quality":"100","zhi":63.05734},{"dateTime":"2014-12-09 13:00:00","id":1690,"quality":"100","zhi":67.74499},{"dateTime":"2014-12-09 12:04:00","id":1634,"quality":"100","zhi":18.23176},{"dateTime":"2014-12-09 12:03:00","id":1633,"quality":"100","zhi":70.61067},{"dateTime":"2014-12-09 12:02:00","id":1632,"quality":"100","zhi":45.97308},{"dateTime":"2014-12-09 12:01:00","id":1631,"quality":"100","zhi":15.97949},{"dateTime":"2014-12-09 12:00:00","id":1630,"quality":"100","zhi":67.60155},{"dateTime":"2014-12-09 11:04:00","id":1574,"quality":"100","zhi":62.86508},{"dateTime":"2014-12-09 11:03:00","id":1573,"quality":"100","zhi":82.72347},{"dateTime":"2014-12-09 11:02:00","id":1572,"quality":"100","zhi":44.99039},{"dateTime":"2014-12-09 11:01:00","id":1571,"quality":"100","zhi":35.38316},{"dateTime":"2014-12-09 11:00:00","id":1570,"quality":"100","zhi":67.74804},{"dateTime":"2014-12-09 10:04:00","id":1514,"quality":"100","zhi":41.3007}]
请大神求解或给建议,刚学javascript 不久, 多次遇到undefined 类问题.
你这样获取不到数据的，$.ajax 是一个异步方法，是异步执行的。简单的说，$.ajax发送请求过后，不会等到数据返回就会直接执行下一条语句，即return getData. 这个时候 getData 还没有被赋过值，所以是 undefined。
在 JavaScript 里异步操作非常常见。就拿题主的例子来说，请求数据是要花较长时间的，如果一直等待响应，程序就会一直卡在那里，web 界面也会失去响应。
一般处理这种情况会采取回调的方式，即传入一个回调方法，还获取数据后执行：
function initData_getData(callback) {
"use strict";
var sbID = $("#eChart1").attr("sbID");
var getData;
$.ajax({
url: "chart/EquipmentData",
Type: "GET",
data: "sbID=" + lineObjectA.SbID + "&chartType=1&UpdateInterval=" + frequent + "&CsID=" + lineObjectA.CsID,
dataType: "json",
success: function (jsonData1) {
callback（jsonData1）;
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
clearTimeout(timeTicket);
chart.showLoading({
text: "获取不到" + chartName + "数据"
});
}
});
}
回调多了的话代码会显得很混乱。如果遇到这样的情况可以使用 async、promise 等一些流程简化方法。
题主可以搜 JavaScript 异步 找一些资料看看，比如这篇：Javascript异步编程的4种方法