Schritt 19: Anzeigen der Daten in Web-Browser-Schritt 1
Erstellen Sie eine neue Datei namens index.php und kopieren Sie den folgenden Code hinein.
Alles zwischen einem "<!--" und eine "-->" ist ein HTML-Kommentar, der die Server und Web-Browser ignorieren werden.
< Code beginnen >
<<! DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional / / EN" "http://www.w3.org/TR/html4/loose.dtd" >
< html >
< Head >
< Titel > meine Mini-Wetterstation < / title >
<!--die obige Abschnitt würde verzichtet werden, wenn Sie dies auf eine vorhandene Webseite hinzufügen. Der nächste Teil des Codes muss zwischen < Head > und < / Leiter > Tags in Ihre bestehende Seite. -->
<!--gehören die Jquery-Bibliothek von Google zu bieten, die JSON-Funktionalität-->
< 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" >
Funktion displayLiveData()
{
Die Daten im JSON-Format vom Server anfordern
Var CurrentTime = new Date();
$.getJSON('./getJSONdata.php?datatype=full &' + currentTime.getTime(), function(data) {}
Var Elemente = [];
durch den Satz von Schlüssel/Val Paare arbeiten Sie und geben Sie dem Browser wo Sie aktualisieren
$...jeder (Daten, Funktion (Key, Val) {}
Switch(Key)
{
Fall "ImpID":
Document.getElementById("impID").innerHTML = Val;
zu brechen;
Fall "Chan":
Document.getElementById("chan").innerHTML = Val;
zu brechen;
Fall "Datum":
Document.getElementById("date").innerHTML = Val;
zu brechen;
Fall "Zeit":
Document.getElementById("time").innerHTML = Val;
zu brechen;
Fall "Temp":
Document.getElementById("temp").innerHTML = Val;
zu brechen;
Fall "Volt":
Document.getElementById("volt").innerHTML = Val;
zu brechen;
Fall "Standort":
Document.getElementById("location").innerHTML = Val;
zu brechen;
}
});
});
}
OnLoad = Function)
{
Legen Sie ein Zeitintervall, das Update des Textes auf der Seite zu tun
t = window.setInterval("displayLiveData()", "5000);
};
< / script >
<!--wenn einer vorhandenen Seite hinzufügen, würde Sie die oben genannten vor eingefügt haben die < / Leiter > Tag auf dieser Seite-->
< / head >
<!--setzen Sie diesen nächsten Code zwischen die < / Leiter > und < body > Tags in Ihre bestehende Seite. Dies ist einige PHP-Skript, das liest die aktuellen Werte um die ursprüngliche Anzeige der Daten zur Verfügung stellen. JavaScript wird nicht angezeigt, beim ersten Laden der Seite. -->
<? Php
Inhalt der latestImpData.txt und geteilten Werte zu lesen
Variablen für die anfängliche Anzeige
$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 = explodieren ("", $datetime);
$date = $dt [0];
$time = $dt [1];
? >
<!--Ende der Php-Lesung von Werten Teil-->
< Body >
< h1 > meine Mini-Wetterstation < / h1 >
Das ist ein einfaches Stück Code, der liest der Spannungs aus einem Thermistor, konvertiert in C und Displays. </p > < p >
< Ul >
<!--Anzeige--> die Liste der Daten, die zunächst mit Hilfe von Php mit Javascript übernehmen
<!--nach 5 Sekunden kontinuierlich aktualisieren-->
< li > Imp-ID: < span Class = Klasse = "Ajax" Id = "ImpID" Style = "Font-Größe: 15px" ><? Php Echo $impID;? >< / span >< li >
< li > Kanal: < span Class = Klasse = "Ajax" Id = "Chan" Style = "Font-Größe: 15px" ><? Php Echo $chan;? >< / span >< li >
< li > Imp Ort: < span Class = Klasse = "Ajax" Id = "Speicherort" Style = "Schriftart-Größe: 15px" ><? Php Echo $location;? >< / span >< li >
< li > Datum: < span Class = Class = "Ajax" Id = "Datumsformat" = "Font-Größe: 15px" ><? Php Echo $date;? >< / span > (Adelaide/Australien) < li >
< li > Zeit: < span Class = Class = "Ajax" Id = "Zeitformat" = "Font-Größe: 15px" ><? Php Echo $time;? >< / span > (Adelaide/Australien) < li >
< li > Temperatur: < span Class = Klasse = "Ajax" Id = "temp" Style = "Font-Größe: 15px" ><? Php Echo $temp;? >< / span > C < li >
< li > Imp Spannung: < span Class = Klasse = "Ajax" Id = "Volt" Style = "Font-Größe: 15px" ><? Php Echo $volt;? >< / span > V < li >
< /ul >
< p > kann man ein vollständiges Protokoll seit Beginn der Tests von < ein href="data.csv" > hier </a >< / p >
< / body >
< / html >
< Code Ende >
Diese Datei ist eine Mischung aus html, Php und Javascript und zeigt eine ziemlich einfache Seite, die die Werte alle 5 Sekunden aktualisiert.