obtener datos de una base de datos en tiempo real, con ajax?

Estoy obteniendo datos de la siguiente base de datos:

enter image description here

Tengo arduino-box que envía esos datos.

Y muestre los datos con este código CSS y 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;
}

Aquí está mi código 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>

La caja arduino está enviando datos a la base de datos ... digamos cada 3 segundos. No quiero presionar F5 cada 5 segundos para obtener los nuevos datos. ¿Debería usar AJAX para esto? He leído algo de AJAX en la red, pero no he encontrado nada bueno para ello.

preguntado el 16 de mayo de 11 a las 20:05

@ Ascherer No lo sé, por favor vote esta pregunta si la encuentra útil -

2 Respuestas

Ponga esto en un archivo php separado, por ejemplo, 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);

Luego, cargue jquery y coloque lo siguiente en el encabezado de la página:

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

Nota: Este no es el código exacto que debe usar, échele un vistazo y cámbielo para que funcione correctamente para usted.

contestado el 17 de mayo de 11 a las 00:05

Gracias, tengo una idea de cómo construirlo ... Encontré un consejo útil aquí para: bit.ly/mQlsPT - usuario592638

Si solo está intentando actualizar la página cada 5 segundos, debe usar javascript y mirar setTimeout:

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

5000 es igual a 5 segundos.

contestado el 17 de mayo de 11 a las 00:05

Todavía puede usar que solo haga que el primer argumento sea una función ajax. - fanfavorito

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.