Php 使用ajax实时从数据库获取数据？_Php_Mysql_Html_Ajax_Jquery

Php 使用ajax实时从数据库获取数据？

php mysql html ajax jquery

Php 使用ajax实时从数据库获取数据？,php,mysql,html,ajax,jquery,Php,Mysql,Html,Ajax,Jquery,我正在从以下数据库获取数据：我有一个传送数据的arduino盒子并使用以下CSS和HTML代码显示数据： <div class="event"> <img src="http://dummyimage.com/80x70/f00/fff.png" alt="picture" /> <p>Room 2</p> <p class="patient-name">Jon Harr

我正在从以下数据库获取数据：

我有一个传送数据的arduino盒子

并使用以下CSS和HTML代码显示数据：

    <div class="event">
        <img src="http://dummyimage.com/80x70/f00/fff.png" alt="picture" />  
        <p>Room 2</p>
        <p class="patient-name">Jon Harris</p>
        <p class="event-text">This is a pixel. A flying pixel!</p>
        <p class="event-timestamp">feb 2 2011 - 23:01</p>
    </div>

.event {  
    display:block;  
    background: #ececec;  
    width:380px;  
    padding:10px;  
    margin:10px;  
    overflow:hidden;  
    text-align: left;
}  
.event img {
    display:block;
    float:left;
    margin-right:10px;
}  

.event p {  
    font-weight: bold;
}

.event img + p {
    display:inline;
}

.patient-name {
    display:inline;
    color: #999999;
    font-size: 9px;
    line-height:inherit;
    padding-left: 5px;
}
.event-text{
    color: #999999;
    font-size: 12px;
    padding-left: 5px;
}
.event-timestamp{
    color: #000;
    padding-left: 5px;
    font-size: 9px;
}


2号房间
乔恩·哈里斯
这是一个像素。一个飞行像素
2011年2月2日-23:01
.事件{
显示：块；
背景:#ececec ;；
宽度：380px；
填充：10px；
利润率：10px；
溢出：隐藏；
文本对齐：左对齐；
}  
.事件img{
显示：块；
浮动：左；
右边距：10px；
}  
.事件p{
字体大小：粗体；
}
.事件img+p{
显示：内联；
}
.病人姓名{
显示：内联；
颜色：#999999；
字体大小：9px；
行高：继承；
左侧填充：5px；
}
.活动文本{
颜色：#999999；
字体大小：12px；
左侧填充：5px；
}
.事件时间戳{
颜色：#000；
左侧填充：5px；
字体大小：9px；
}

以下是我的PHP代码：

<!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>
  <title>DASHBOARD - Arduino 3</title>
  <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
    <?php
    $con = mysql_connect("localhost","*****","***");
        if(!con)
        {
            die('Could not connect: ' . mysql_error());
        }

        mysql_select_db("arduino_db",$con);

        $result = mysql_query("SELECT * FROM events");
        //Start container
        echo " <div id='background_container'> ";

        while($row = mysql_fetch_array($result))
        {
            echo "<div class='event'>";
            echo "<img src='img/ev_img/red.jpg' alt='picture' />";
            echo "<p>" . $row['inneboende'] . "</p>";
            echo "<p class='patient-name'>" . "$row['overvakare']" . "</p>";
            echo "<p class='event-text'>" . "$row['handelse']" . "</p>";
            echo "<p class='event-timestamp'>" . "$row['tid']" . "</p>";
            echo "</div>";
        }

        //end container
        echo "</div>"
        mysql_close($con);

    ?>
</body>
</html>


仪表板-Arduino 3
如果您只是尝试每5秒刷新一次页面，则应使用javascript并查看setTimeout：
setTimeout("location.reload(true);",5000);

5000等于5秒。
将其放在单独的php文件中，例如getEvents.php：
<?php
$con = mysql_connect("localhost","*****","***");
    if(!con)
    {
        die('Could not connect: ' . mysql_error());
    }

    mysql_select_db("arduino_db",$con);

    $result = mysql_query("SELECT * FROM events");

    while($row = mysql_fetch_array($result))
    {
        echo "<div class='event'>";
        echo "<img src='img/ev_img/red.jpg' alt='picture' />";
        echo "<p>" . $row['inneboende'] . "</p>";
        echo "<p class='patient-name'>" . "$row['overvakare']" . "</p>";
        echo "<p class='event-text'>" . "$row['handelse']" . "</p>";
        echo "<p class='event-timestamp'>" . "$row['tid']" . "</p>";
        echo "</div>";
    }

    mysql_close($con);

您仍然可以使用它，这只会使第一个参数成为ajax函数。谢谢，我知道如何构建它。。我在这里找到了一个有用的提示：@ascheer我不知道，请把这个问题投上去，我觉得它很有用
<script type="text/javascript">
    $(document).ready(function() {  
        $.get('getEvents.php', function (data) {
            $('#background_container').html(data);
        });
    });
</script>