无法使用AJAX将数据放入批次 [英] Can't Get Data Into Flot With AJAX
问题描述
我正在使用下面的代码将数据图形化为flot，当我打印出dataOne时，它将返回格式化正确的flot值，但是当我将其设置为flot的图形数据时，flot会形成一个图形，但是没有数据点?
I am using the code below to graph data into flot, and when I print out dataOne, it returns properly formatted values for flot, however when I set it as the data for flot to graph, flot forms a graph but then has no data points?
<!DOCTYPE HTML>
<html>
<head>
<title>AJAX FLOT</title>
<script language="javascript" type="text/javascript" src="../../jquery.js"></script>
<script language="javascript" type="text/javascript" src="../../jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="../../jquery.flot.time.js"></script>
</head>
<body>
<div id="placeholder" style="width: 100%;height: 600px;"></div>
<script language="javascript" type="text/javascript">
var options = {
lines: {
show: true
},
points: {
show: true
},
yaxis: {
min: "0",
max: "1023"
},
xaxis: {
mode: "time"
}
};
function update() {
$.ajax({
url: "http://localhost/data.php",
context: document.body
}).done(function(response) {
dataOne = response;
var d = "[" + dataOne + "]";
var plot = $.plot($('#placeholder'), [d], options);
setTimeout(update, 1000);
});
}
update();
</script>
</html>
推荐答案
对于那些可能想做类似事情的人来说，这是我最终使之工作的代码. :)
For those of you who may want to do something similar, here is the code I used to finally make it work. :)
首先，产生所收集PHP文件值的页面不正确. Arduino使用AJAX每秒更新一次值，但是我意识到这很愚蠢，因为从主AJAX调用(每秒调用data.php，然后调用此页面)每秒调用一次该页面.因此，我从Arduino Web服务器代码中删除了AJAX.
First off, the page that produced the value the PHP file collected was incorrect. The Arduino was using AJAX to update the value every second, but I realised this was stupid as the page was called every second from the main AJAX call which called data.php which then called this page. So I removed the AJAX from the Arduino Web Server code.
由于代码无法正常工作，我花了数小时试图尝试寻找替代方案.在highcharts.js中，我找到了一些AJAX代码，并决定尝试一下.这是我最后得到的代码:
Since the code was not working and I had spent hours trying I started to look around for alternatives. In highcharts.js I found some AJAX code, and decided to try it. Here is the code I ended up with:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>AJAX FLOT</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script language="javascript" type="text/javascript" src="../../jquery.js"></script>
<script language="javascript" type="text/javascript" src="../../jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="../../jquery.flot.time.js"></script>
</head>
<body>
<div id="placeholder" style="width: 100%;height: 600px;"></div>
<div id="div" style="width: 100%; height: 100px;"></div>
<script type="text/javascript">
var options = {
lines: {
show: true
},
points: {
show: true
},
xaxis: {
mode: "time"
}
};
window.setInterval(function(){
$.getJSON('http://localhost/data.php', function (csv) {
dataOne = csv;
var plot = $.plot($('#placeholder'), [dataOne], options);
});
}, 1000);
</script>
</html>
在那之后，我必须使data.php正常工作.我在哪里遇到问题
After that, I had to get the data.php working properly. I had a problem where
file_get_contents
不仅可以获得Arduino的输出，还可以获得周围的许多标签.这塞满了我的数据.因此，我放弃了正确的html标签，而只打印出简单的值.因此，如果您转到Arduino输出的页面源，则该值周围没有标签，您看到的只是一个数字.这样就解决了这个问题.
Would not only get the output of the Arduino, but also many of the tags surrounding it. This stuffed up my data. So I gave up with the proper html tags and just printed out the plain value. So if you went to the page source of the Arduino's output, there are no tags surrounding the value, all you see is a number. So that stopped that issue.
这是我用来格式化值的php代码:
Here is the php code I use to format the values:
<?php
$file = "data.txt";
$webpage = "http://192.168.1.177/";
$t = time() * 1000;
$current = file_get_contents($file);
$data = file_get_contents($webpage);
if ($current < "1") {
$current .= '[[' . $t . ', ' . $data . ']]';
file_put_contents($file, $current);
echo $current;
}
else {
$cut = substr($current, 0, -1);
$cut .= ', [' . $t . ', ' . $data . ']]';
file_put_contents($file, $cut);
echo $cut;
}
?>
要将数据放入适当的括号中，您可以看到，如果文件中不存在数据，则if语句不包含逗号和空格，因为没有其他可分离的数据集.一旦文件中有一个值，我就使用substr删除最后一个包含括号的内容，然后附加逗号，空格和值，然后将包含括号的内容再次放置在数据的末尾.
To get the data into the appropriate brackets, you can see that when no data is present in the file, the if statement does not include a comma and space, because there is no other set of data to separate from. As soon as one value is in the file, I use substr to get rid of the last containing bracket, then append the comma, space and then values, with the containing bracket put again at the very end of the data where it should be.
无论如何，这最终像梦一样工作.谢谢大家的帮助:)
Anyway, this ended up working like a dream. Thanks for everyones help :)
这篇关于无法使用AJAX将数据放入批次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
