我正在尝试创建一个简单的程序,从我设置的数据库中获取天气数据,并将其显示在网页上。我现在设置的方式是你必须在文本框中输入一个值才能获取数据。
我的HTML代码:
<!DOCTYPE html>
<html>
<head>
<title>Database</title>
</head>
<body>
Name: <input type="text" id="name">
<input type="submit" id="name-submit" value="Grab">
<div id="name-data"></div>
<div id="container" style="min-width: 310px; height: 400px;
margin: 0 auto"></div>
<script src="http://code.jquery.com/jquery-1.8.0.min.js">
</script>
<script src="js/global.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"> </script>
</body>
</html>
我的PHP代码:
<?php
if(isset($_POST['name']) === true && empty($_POST['name']) === false) {
mysql_connect("localhost", "root", "Logilube163");
mysql_select_db("Weather_Test_Simple_Schema__Rev1");
$query = mysql_query("SELECT * FROM Location");
while($row = mysql_fetch_array($query)){
$time = strtotime($row['time']) * 1000;
$tempF = $row['temp_f'];
![enter image description here][1]$data []= [(int)$time, (int)$tempF];
}
echo json_encode($data);
}
?>
代码能够查询我的数据库,并将数据放入数据数组$ data。
然后使用json_encode()对数据数组进行编码;函数并被转移到javascript文件,在那里它被成功读出并放在html页面上。
我的JS代码:
$('input#name-submit').on('click', function(){
var name = $('input#name').val();
if($.trim(name)!=''){
$.post('/ajaxdb/ajax/name.php',{name: name}, function(data){
$('div#name-data').text(data); // Outputs the data before the graph
$('#container').highcharts({
chart: {
zoomType: 'x'
},
xAxis: {
type: 'datetime',
minRange: 24 * 3600000
},
title : {
text : 'Weather Data'
},
series : [{
data: data // <-- This data is not being read in by the graph
//[[1432813308000,78],[1432813904000,77],[1432813968000,77],[1432814016000,77],[1432815600000,78],[1432832464000,66],[1432843057000,65],[1432843731000,65]]
//The above data is read in by the graph and plots just fine.
}]
});
});
}
});
我的输出结果如下所示:
问题是这个在javascript中读出的数据相同,并且无法放在highcharts图中。相反,图表是使用正确的轴创建的,但没有任何数据点。但是,当我输入由标签创建的数据点时,数据绘制得很好。
答案 0 :(得分:0)
为了回答我自己的问题,我发现我需要代码:
header("Content-type: text/json");
在我的.php文件的顶部。