前段时间做个关于数据采集的课设,内容是把温湿度采集保存到mysql里,再用网页显示出来。然而网页的动态显示卡了好久(温湿度一直更新,静态html不能一直刷新),多次请教最后还是解决了,方法就是利用ajax来实现。
准备工作
环境:php环境、jquery、mysql
mysql:
数据库名称:design
表名:test
mysql> CREATE TABLE `test` (
`id` int AUTO_INCREMENT NOT NULL,
`temp` varchar(2) NOT NULL,
`humi` varchar(2) NOT NULL,
PRIMARY KEY(`id`)
);
数据:
INSERT INTO `test` VALUES
(NULL,'38','99');
功能实现:
一:getData.php文件连接数据库,读取id最大的数据,并且返回一个数据类型的变量。
二:index.html主页面,JavaScript写函数, 5秒一次读取getData.php的返回值,并且显示、
代码:getData.php
<?php
if($conn=@mysql_connect('localhost','root','password')){
mysql_select_db("design",$conn);
$sql = "SELECT * FROM test WHERE id = (SELECT MAX(id)FROM test)";
if($result = mysql_query($sql)){
$row = mysql_fetch_array($result);
echo json_encode($row);
}
else echo "查询失败!<br>";
}
else echo "连接失败!<br>";
?>
代码:index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0">
<title>ajax_test</title>
<script src="/jquery-1.10.1.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(e) {
getRemote();
});
function getRemote () {
$.getJSON('./getData.php', function (data) {
$('#temp1').text(data['temp'])
$('#humi1').text(data['humi'])
})
setTimeout(getRemote,5000);
}
</script>
</head>
<body>
<h2>房间一:</h2>
<p>温度:<span id="temp1">loading...</span>℃</p>
<p>湿度:<span id="humi1">loading...</span>%</p>
</body>
现象:
数据库再插入一个值
INSERT INTO `test` VALUES
(NULL,'11','11');
网页没刷新数据也改变了。