Javascript 返回HTML而不是JSON的ajax响应内的jQuery ajax调用
我正在使用HighCharts为时间序列数据编写一个简单的查看器。可能出现的一个问题是，这些值可能会在一段时间内停止输入，然后恢复。在我的系统中，这些值最终会进入数据库，我不会丢失它们，它们只是被延迟了。我想要在我的UI上正常地每秒滚动一次，因为如果工作正常的话，数据就会进入。如果数据停止，用户界面应该暂停滚动，这也是可行的。如果数据可用性在一段时间后恢复，那么我希望图表进行间隙填充，即填充在不可用期间丢失的部分 这就是我现在想要解决的问题。我发出一个同步的$.ajax调用来获取丢失的数据，但是返回的数据是页面本身的HTML，而不是JSON。我已经测试了服务器端调用，当从浏览器直接调用时，它返回的JSON很好。那么有人能看到我的间隙填充图出了什么问题吗？在下面的代码中，由于某些原因，请参见注释data2此处是HTML而不是JSON，以了解其错误之处 谢谢,， 维吉尔Javascript 返回HTML而不是JSON的ajax响应内的jQuery ajax调用,javascript,jquery,ajax,json,highcharts,Javascript,Jquery,Ajax,Json,Highcharts,我正在使用HighCharts为时间序列数据编写一个简单的查看器。可能出现的一个问题是，这些值可能会在一段时间内停止输入，然后恢复。在我的系统中，这些值最终会进入数据库，我不会丢失它们，它们只是被延迟了。我想要在我的UI上正常地每秒滚动一次，因为如果工作正常的话，数据就会进入。如果数据停止，用户界面应该暂停滚动，这也是可行的。如果数据可用性在一段时间后恢复，那么我希望图表进行间隙填充，即填充在不可用期间丢失的部分 这就是我现在想要解决的问题。我发出一个同步的$.ajax调用来获取丢失的数据，但是
发现了问题，非常基本。我使用Python风格的sprintf格式生成gapfill URL。我想的Python太多了。尝试在ajax设置中添加dataType:json，看看这是否是一个很好的建议，但错误仍然存在。您是否检查了ajax请求发送的实际url？您的请求是否发送到服务器方法？
<!doctype html>
<html lang="en">
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script>
function log(msg) {
if ( window.console && window.console.log ) {
console.log(msg)
}
}
function pauseBtnHandler() {
pauseChart = !pauseChart
if (pauseChart) {
$('#pauseBtn').val('Resume Display')
}
else {
$('#pauseBtn').val('Pause Display')
}
}
function timestampToLocaldate(timestamp) {
return new Date(timestamp - TIMEZONE_OFFSET)
}
$(function () {
$(document).ready(function() {
$.ajaxSetup({ cache: false })
pauseChart = false
prevTimestamp = 0
prevScroll = true
dataStoppedTimestamp = false
// get localtime offset in minutes, then convert to ms for use with charting
offset = new Date().getTimezoneOffset()
TIMEZONE_OFFSET = -offset * 60 * 1000
SAMPLE_PERIOD = 1000
// Do an initial query to get the current latest timestamp (in ms since Epoch)
jQuery.ajax({
url: '/mgmt/currentValues',
success: function(data) {
now = data['timestamp'] * 1000 + TIMEZONE_OFFSET
},
error: function (xhr, ajaxOptions, thrownError) {
alert('Error getting initial timestamp, defaulting time to now ' + thrownError)
now = new Date().getTime()
},
async: false
});
var chart;
$('#chart').highcharts({
chart: {
type: 'spline',
animation: Highcharts.svg, // don't animate in old IE
backgroundColor:
{
linearGradient: [0, 0, 0, 500],
stops: [
[0, 'rgb(160, 160, 160)'],
[1, 'rgb(0, 0, 0)']
]
},
events: {
load: function() {
var series1 = this.series[0];
setInterval(function() {
$.get("mgmt/currentValues",function(data, status){
if (!pauseChart) {
var timestamp = data['timestamp'] * 1000 + TIMEZONE_OFFSET
// Only scroll the chart if a more recent value has come in
dt = timestamp - prevTimestamp
var scroll = (dt > 0)
if (!scroll) {
dataStoppedTimestamp = timestamp
}
// Determine if gap fill required
if (prevScroll == false && scroll == true && dt > SAMPLE_PERIOD) {
log('doing gapfill from ' + timestampToLocaldate(dataStoppedTimestamp) + ' to ' + timestampToLocaldate(timestamp))
jQuery.ajax({
url:'/mgmt/getdatafortimeperiod/%d/%d' % (dataStoppedTimestamp, timestamp),
success: function(data2) {
// data2 here is HTML not JSON for some reason
log(data2)
for (row2 in data2) {
var timestampGf = row2['timestamp'] * 1000 + TIMEZONE_OFFSET
series1.addPoint([timestampGf, row2['cpuPct']], false, true)
}
},
error: function (xhr, ajaxOptions, thrownError) {
alert('Error getting gapfill data ' + thownError)
},
async: false
});
}
series1.addPoint([timestamp, data['cpuPct']], scroll, true)
log(timestampToLocaldate(timestamp) + ' ' + data['cpuPct'])
prevTimestamp = timestamp
prevScroll = scroll
}
});
}, SAMPLE_PERIOD);
}
}
},
title: {
text: 'PERFORMANCE DATA',
style: {
color: 'black',
fontWeight: 'bold',
fontSize: '1.5em',
fontFamily: 'Arial',
}
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150,
labels: {
style: {
color: 'white',
fontFamily: 'Arial',
},
}
},
yAxis: [{
lineWidth: 1,
min: 0,
labels: {
style: {
color: 'white',
fontFamily: 'Arial',
},
},
title: {
text: 'CPU (%)',
style: {
color: 'white',
fontWeight: 'bold',
fontSize: '16px',
fontFamily: 'Arial',
}
}
}],
tooltip: {
formatter: function() {
str = '<b>'+ this.series.name +'</b><br/>'+
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'<br/>'+
Highcharts.numberFormat(this.y, 0);
return str;
}
},
legend: {
enabled: true,
itemStyle: {
color: 'white',
font: 20,
},
backgroundColor: '#1C1C1C',
margin: 30,
itemDistance: 22,
symbolWidth:22,
symbolHeight:16,
},
exporting: {
enabled: true
},
series: [{
name: 'CPU %',
color: '#FF0000',
data: (function() {
// generate an initial array of data
var data = [],
time = now,
i;
for (i = -39; i <= 0; i++) {
data.push({
x: time + i * SAMPLE_PERIOD,
y: 0
});
}
return data;
})()
},
]
});
});
});
</script>
</head>
<body>
<div id="graph">
<div id="chart" style="; height: 100%; margin: 0 auto; "></div>
<div id="pauseButton">
<input id="pauseBtn" type="submit" value="Pause Display" onclick="pauseBtnHandler();">
</div>
</div>
</body>
</html>