html数据动态显示、利用ajax动态显示mysql的数据_html 网页开发如何实现动态网页 ajax

作者：小蓝xlanll | 2024-04-10 13:52:14

踩

html 网页开发如何实现动态网页 ajax

前段时间做个关于数据采集的课设，内容是把温湿度采集保存到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`)
);1
2
3
4
5
6

数据：

INSERT INTO `test` VALUES 
(NULL,'38','99');1
2

功能实现：

一：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>";
?>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

代码：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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

现象：
这里写图片描述

数据库再插入一个值

INSERT INTO `test` VALUES 
(NULL,'11','11');1
2

网页没刷新数据也改变了。
这里写图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小蓝xlanll/article/detail/399073