Paso 19: Mostrar los datos en el paso de navegador web 1
Crear un nuevo archivo llamado index.php y copie el código siguiente en él.
Cualquier cosa entre un "<!--" y un "-->" es un Comentario de html que el servidor y el navegador ignorará.
< el comenzar del código >
<<! Html DOCTYPE público "-//W3C//DTD HTML 4.01 Transitional / / EN" "http://www.w3.org/TR/html4/loose.dtd" >
< html >
< head >
< title > mi mini estación meteorológica < / title >
<!--la sección anterior se omite si esto va a agregar a una página web existente. El siguiente bit de código debe ser entre el < head > y < / cabeza > etiquetas en la página existente. -->
<!--incluyen la biblioteca de jquery desde google para proporcionar la funcionalidad JSON-->
< script tipo = "texto/javascript" src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' charset = 'utf-8' >< / script >
< script tipo = "texto/javascript" >
función displayLiveData()
{
Solicitar los datos en formato JSON desde el servidor
currentTime var = new Date ();
$.getJSON('./getJSONdata.php?datatype=full &' + currentTime.getTime(), function(data) {}
var elementos = [];
trabajar con el conjunto de pares de clave/val y decirle al navegador donde actualizar
$.each (datos, función (tecla, val) {}
Switch(Key)
{
caso "impID":
document.getElementById("impID").innerHTML = val;
rotura;
caso "chan":
document.getElementById("chan").innerHTML = val;
rotura;
caso "fecha":
document.getElementById("date").innerHTML = val;
rotura;
caso "tiempo":
document.getElementById("time").innerHTML = val;
rotura;
caso "temp":
document.getElementById("temp").innerHTML = val;
rotura;
caso "v":
document.getElementById("volt").innerHTML = val;
rotura;
caso "ubicación":
document.getElementById("location").innerHTML = val;
rotura;
}
});
});
}
OnLoad = function)
{
Establecer un intervalo de tiempo para hacer la actualización del texto en la página
t = window.setInterval("displayLiveData()", 5000);
};
< /script >
<!--si agregar a una página existente, hubiera pegado lo anterior antes de la < / cabeza > etiqueta en la página-->
< /HEAD >
<!--poner este código siguiente entre el < / cabeza > y < body > etiquetas en la página existente. Se trata de un script PHP que lee los últimos valores para proporcionar la pantalla inicial de datos. JavaScript no muestra cuando se carga primero página. -->
<? php
Leer contenido de valores latestImpData.txt y split
variables para la pantalla inicial
$data = file_get_contents("latestImpData.txt");
$convert = explode("|",$data);
$impID = $convert [0];
$chan = $convert [1];
$datetime = $convert [2];
$temp = $convert [3];
$volt = $convert [4];
$location = $convert [5];
$dt = explotar ("", $datetime);
$date = $dt [0];
$time = $dt [1];
? >
<!--final de la lectura de php de valores parte-->
< cuerpo >
< h1 > mi mini estación meteorológica < / h1 >
< p > este es un simple pedazo de código que lee el voltaje de un termistor, se convierte en C y muestra. < /p >
< ul >
<!--pantalla--> la lista de datos inicialmente usando php con Javascript tomando
<!--después de 5 segundos continuamente actualizar-->
< li > Imp ID: < abarcan clase = class = "ajax" id = "impID" style = "font-tamaño: 15px" ><? php echo $impID;? >< / span >< /li >
< li > canal: < abarcan clase = class = "ajax" id = "chan" estilo = "font-tamaño: 15px" ><? php echo $chan;? >< / span >< /li >
< li > Ubicación de Imp: < abarcan clase = class = "ajax" id = "ubicación" style = "font-tamaño: 15px" ><? php echo $location;? >< / span >< /li >
< li > fecha: < abarcan clase = class = "ajax" id = "fecha" style = "font-tamaño: 15px" ><? php echo $date;? >< / span > (Adelaide/Australia) < /li >
< li > tiempo: < span clase = clase = "ajax" id = "tiempo" estilo = "font-tamaño: 15px" ><? php echo $time;? >< / span > (Adelaide/Australia) < /li >
< li > temperatura: < abarcan clase = class = "ajax" id = "temp" estilo = "font-tamaño: 15px" ><? php echo $temp;? >< / span > C < /li >
< li > voltaje de Imp: < abarcan clase = class = "ajax" id = "v" estilo = "font-tamaño: 15px" ><? php echo $volt;? >< / span > V < /li >
< /ul >
< p > puede ver un registro completo desde Inicio de los ensayos por < a href="data.csv" > clic aquí < /a >< /p >
< /body >
< / html >
< final código >
Este archivo es una mezcla de html, php y javascript y muestra una página bastante básica que actualiza los valores de cada 5 segundos.
