2011-05-16 140 views
2

我從以下數據庫中獲取數據:使用ajax實時從數據庫中獲取數據?

enter image description here

我有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; 
} 

這是我的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秒按一次F5來獲取新數據。我應該使用AJAX嗎?我已經閱讀了一些網絡上的AJAX,但我沒有找到任何好的方法。

+0

爲什麼這是低調的? – Ascherer 2011-05-16 21:08:16

+0

@Ascherer我不知道,請upvote這個問題,我覺得你有用 – SHUMAcupcake 2013-01-06 14:52:50

回答

3

把它放在一個單獨的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); 

然後,負載jQuery和把下面的頁面頭部:

<script type="text/javascript"> 
    $(document).ready(function() { 
     $.get('getEvents.php', function (data) { 
      $('#background_container').html(data); 
     }); 
    }); 
</script> 

注:這是不是你應該使用,看看確切的代碼它並改變它,以便它能正確地爲你工作。

+0

謝謝,我有一個想法如何建立它..我在這裏找到一個有用的技巧:http://bit.ly/mQlsPT – SHUMAcupcake 2011-05-16 21:32:59

2

如果你只是想刷新頁面每隔5秒,你應該使用JavaScript和看的setTimeout:

setTimeout("location.reload(true);",5000); 

5000等於5秒。

+0

不,我只是想要更新頁面的某些部分。 – SHUMAcupcake 2011-05-16 20:48:54

+0

你仍然可以使用它只使第一個參數成爲ajax函數。 – fanfavorite 2011-05-16 21:02:51