Étape 19 : Afficher les données à l’étape de navigateur web 1
Créez un nouveau fichier appelé index.php et copiez-y le code suivant.
Quoi que ce soit entre un "<!--" et un "-->" est un commentaire html qui ignorent le serveur et le navigateur web.
< code Commencez >
<< ! DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional / / EN" « http://www.w3.org/TR/html4/loose.dtd » >
< html >
< tête >
< titre > mon minie station météo < /title >
<!--la section ci-dessus pourrait être omise si vous ajoutez cela à une page web existante. Le bit de code suivant doit être comprise entre la tête de < > et < / head > balises dans votre page existante. -->
<!--inclure la bibliothèque jquery de google de fournir la fonctionnalité JSON-->
< script type = « text/javascript » src = « https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js » charset = 'utf-8' >< / script >
< script type = « text/javascript » >
fonction displayLiveData()
{
Demander les données au format JSON à partir du serveur
currentTime var = new Date() ;
$.getJSON('./getJSONdata.php?datatype=full &' + currentTime.getTime(), function(data) {}
var items = [] ;
à travers le jeu de paires clé/val et indiquer le navigateur où mettre à jour
.chaque $(données, fonction (key, val) {}
Switch(Key)
{
affaire « impID » :
document.getElementById("impID").innerHTML = val ;
rupture ;
affaire « chan » :
document.getElementById("chan").innerHTML = val ;
rupture ;
affaire « date » :
document.getElementById("date").innerHTML = val ;
rupture ;
affaire « temps » :
document.getElementById("time").innerHTML = val ;
rupture ;
affaire « temp » :
document.getElementById("temp").innerHTML = val ;
rupture ;
affaire « volt » :
document.getElementById("volt").innerHTML = val ;
rupture ;
affaire « lieu » :
document.getElementById("location").innerHTML = val ;
rupture ;
}
});
});
}
OnLoad = function ()
{
Définissez un intervalle de temps à faire la mise à jour du texte sur la page
t = window.setInterval("displayLiveData()", 5000) ;
};
< /script >
<!--si vous ajoutez à une page existante, vous aurait collé ci-dessus avant le < / head > balise dans cette page-->
< / head >
<!--mettre ce code suivant entre les < / head > et < body > balises dans votre page existante. Il s’agit d’un script PHP qui lit les valeurs les plus récentes afin de fournir l’affichage initial des données. JavaScript ne s’affiche pas lorsque le premier chargement de la page. -->
<? php
Lire le contenu des valeurs latestImpData.txt et split à
variables pour l’affichage initial
$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 = explode ("", $datetime) ;
$date = $dt [0] ;
$time = $dt [1] ;
? >
<!--fin de la lecture de php de valeurs partie-->
< corps >
< h1 > mon minie station météo < / h1 >
< p > : il s’agit d’un simple morceau de code qui lit la tension d’une thermistance, convertit en C et afficheurs. < /p >
< ul >
<!--affichage--> la liste des données initialement à l’aide de php avec prise en charge de Javascript
<!--après 5 secondes de continuellement mettre à jour-->
< li > Imp ID: < span class = class = « ajax » id = « impID » style = "font-taille : 15px" ><? php echo $impID;? >< / span >< /li >
< li > canal : < span class = class = « ajax » id = « chan » style = "font-taille : 15px" ><? php echo $chan;? >< / span >< /li >
< li > Imp emplacement : < span class = classe = « ajax » id = « emplacement » style = "font-taille : 15px" ><? php echo $location;? >< / span >< /li >
< li > Date : < span class = class = « ajax » id = « date » style = "font-taille : 15px" ><? php echo $date;? >< / span > (Adelaide/Australie) < /li >
< li > temps : < span class = class = « ajax » id = « temps » style = "font-taille : 15px" ><? php echo $time;? >< / span > (Adelaide/Australie) < /li >
< li > température : < span class = class = « ajax » id = « temp » style = "font-taille : 15px" ><? php echo $temp;? >< / span > C < /li >
< li > tension Imp : < span class = class = « ajax » id = « volt » style = "font-taille : 15px" ><? php echo $volt;? >< / span > V < /li >
< /ul >
< p > vous pouvez voir un journal complet depuis le début des essais par < a href="data.csv" > cliquant ici < /a >< /p >
< / body >
< / html >
fin de < code >
Ce fichier est un mélange de html, php et javascript et affiche une page assez basique qui met à jour les valeurs de toutes les 5 secondes.