Stap 19: De gegevens weergeven in de web browser stap 1
Maak een nieuw bestand geheten index.php en kopieer de volgende code erin.
Iets tussen een "<!--" en een "-->" is een HTML-opmerking die de server en de webbrowser zal negeren.
< code beginnen >
<<! DOCTYPE html publiek "-//W3C//DTD HTML 4.01 Transitional / / nl" "http://www.w3.org/TR/html4/loose.dtd" >
< html >
< head >
< titel > mijn mini weerstation < / title >
<!--de bovenstaande sectie zou achterwege blijven, indien u dit aan een bestaande webpagina toevoegt. Het volgende codefragment moet tussen de < head > en < / head >-codes in uw bestaande pagina. -->
<!--omvatten de bibliotheek jquery van google om de JSON-functionaliteit-->
< 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" >
functie displayLiveData()
{
De gegevens in JSON-formaat opvraagt van de server
var currentTime = nieuwe Date();
$.getJSON('./getJSONdata.php?datatype=full &' + currentTime.getTime(), function(data) {}
var items = [];
werken door de verzameling van sleutel/val paren en vertellen de browser waar bijwerken
$gedrukt (data, functie (key, val) {}
switch(Key)
{
Case "impID":
document.getElementById("impID").innerHTML = val;
breken;
Case "chan":
document.getElementById("chan").innerHTML = val;
breken;
Case "datum":
document.getElementById("date").innerHTML = val;
breken;
Case "tijd":
document.getElementById("time").innerHTML = val;
breken;
Case "temp":
document.getElementById("temp").innerHTML = val;
breken;
Case "volt":
document.getElementById("volt").innerHTML = val;
breken;
Case "locatie":
document.getElementById("location").innerHTML = val;
breken;
}
});
});
}
onload = functie)
{
Een tijdsinterval te doen van de update van tekst op een pagina instellen
t = window.setInterval("displayLiveData() ', 5000);
};
< / script >
<!--als toevoegt aan een bestaande pagina, u zou hebt geplakt de bovenstaande vóór de < / head >-code in die pagina-->
< / head >
<!--zet deze volgende code tussen de < / head > en < body >-codes in uw bestaande pagina. Dit is een PHP-script dat de laatste waarden leest voor de eerste weergave van gegevens. JavaScript wordt niet weergegeven wanneer de pagina de eerste keer laadt. -->
<? php
Inhoud van latestImpData.txt en split waarden te lezen
variabelen voor de eerste weergave
$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 = ontploffen ("", $datetime);
$date = $dt [0];
$time = $dt [1];
? >
<!--einde van de php-lezing van waarden deel-->
< body >
< h1 > mijn mini weerstation < / h1 >
< p > Dit is een eenvoudig stukje code dat de spanning van een Thermistor wordt gelezen, wordt geconverteerd naar C en beeldschermen. < /p >
< ul >
<!--display de lijst van gegevens in eerste instantie met behulp van php met Javascript overname-->
<!--na 5 seconden om het voortdurend bijwerken ->
< li > Imp ID: < span klasse = class = "ajax" id = "impID" stijl = "lettertype-grootte: 15px" ><? php echo $impID;? >< / span >< /li >
< li > kanaal: < span klasse = class = "ajax" id = "chan" stijl = "lettertype-grootte: 15px" ><? php echo $chan;? >< / span >< /li >
< li > Imp locatie: < span klasse = class = "ajax" id = "locatie" stijl = "lettertype-grootte: 15px" ><? php echo $location;? >< / span >< /li >
< li > datum: < span klasse = class = "ajax" id = "datumnotatie" = "lettertype-grootte: 15px" ><? php echo $date;? >< / span > (Adelaide/Australië) < /li >
< li > tijd: < span klasse = class = "ajax" id = "Tijdstijl" = "lettertype-grootte: 15px" ><? php echo $time;? >< / span > (Adelaide/Australië) < /li >
< li > temperatuur: < span klasse = class = "ajax" id = "temp" stijl = "lettertype-grootte: 15px" ><? php echo $temp;? >< / span > C < /li >
< li > Imp spanning: < span klasse = class = "ajax" id = "volt" stijl = "lettertype-grootte: 15px" ><? php echo $volt;? >< / span > V < /li >
< /ul >
< p > u kunt zien een volledige log sinds begin van testen door < een href="data.csv" > < /a >< /p > hier te klikken
< / body >
< / html >
< code einde >
Dit bestand is een mix van html, php en javascript en een vrij eenvoudige pagina waarmee de waarden worden bijgewerkt elke 5 seconden wordt weergegeven.
