html数据动态显示、利用ajax动态显示mysql的数据

最新推荐文章于 2024-05-22 07:03:18 发布

菠萝油Grent

最新推荐文章于 2024-05-22 07:03:18 发布

阅读量8.2k

点赞数 6

分类专栏：网页文章标签： ajax html动态显示动态读取mysql ajax动态显示

本文链接：https://blog.csdn.net/haha1fan/article/details/73604575

版权

网页专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

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

菠萝油Grent

关注

6
点赞
踩
62

收藏

觉得还不错? 一键收藏
12
评论
html数据动态显示、利用ajax动态显示mysql的数据

前段时间做个关于数据采集的课设，内容是把温湿度采集保存到mysql里，再用网页显示出来。然而网页的动态显示卡了好久（温湿度一直更新，静态html不能一直刷新），多次请教最后还是解决了，方法就是利用ajax来实现。准备工作环境：php环境、jquery、mysqlmysql：数据库名称：design 表名：testmysql> CREATE TABLE `test` ( `id` int A
复制链接

扫一扫

专栏目录