php und Ajax

ChrisRoo

Mitglied
Hallo zusammen,

ich bin neu hier und beschäftige mich normalerweise mit Mikrocontrollern. Nun habe ich aber ein Projekt gestartet, bei dem ich gewisse Zustände von Sensoren in einer Website visualisieren möchte. Hierzu lade ich über ein Webinterface eine Datenbank mit Informationen.
Meine Website greift mittels PHP (mysqli-query) auf die Datenbank zu und lädt ein paar php - variablen mit 0 oder 1.

Ich möchte nun, dass die variablen jede Sekunde gecheckt werden. Bei einer Änderung von 0 auf 1 soll ein GIF-Bild dynamisch (ohne reload der Site) und absolut auf der Website positioniert angezeigt werden. Wenn die Varable von 1 auf 0 geht, dann soll das Bild wieder verschwinden - natürlich wieder ohne reload.

Ich denke, mit Ajax und jquery bin ich schon auf dem richtigen Weg. Nur leider habe ich noch nicht damit gearbeitet und habe überhaupt keine Ahnung wie so eine function aussehen müsste.

Vielleicht hat jemand eine Lösung für mich parat.
Danke und viele Grüße
Chris
 
Ja, mit Ajax und jQuery bist Du schon auf dem richtigen Wege. Hier ist eine gute Kurzanleitung dafür:
JS: Einführung in AJAX (Quickstart) mit JQuery und PHP

Und dann soll das Ganze ja jede Sekunde aktualisiert werden. Dazu brauchst Du die Funktion setInterval:
JavaScript/Window/setInterval – SELFHTML-Wiki

Bei einer Änderung von 0 auf 1 soll ein GIF-Bild dynamisch (ohne reload der Site) und absolut auf der Website positioniert angezeigt werden.
Dabei ist mir unklar: Es sind ja mehrere Variablen und entspr. können es auch mehrere GIF-Bilder sein. Sollen die dann in einer Zeile oder in einer Matrix o. ä. angezeigt werden? Und meinst Du mit "absolut positioniert" dass sie den anderen Inhalt der Seite überdecken sollen?
 
Hallo,
danke für die schnelle Antwort.
Also es sind insgesamt 4 variablen, deren Inhalt sich ändern kann (0 oder 1).
Die variablen sollen sekündlich abgefragt werden und bei einer Änderung soll ein div-container geändert werden.
Ich habe also 4 div-containder mit der id 1-4. In den containern soll bei "0" das null.gif und bei "1" das eins.gif geladen werden. Positioniert ist das Ganze schon über die div-id und css.

Es geht also nur um das Script, welches mir sekündlich die 4 variablen abfragt und die div-container ohne reload ändert bzw. aktualisiert.
 
Dann fehlt dir ja gar nicht mehr viel. Für die GIFs brauchst Du je ein img-Tag und dann kannst Du die Grafik folgender Maßen austauschen:
document.getElementById("id-des-img-tags").src = "null.gif";
bzw. anders herum mit eins.gif.
 
Oha,
ich glaube, die Lösung ist nahe, aber ich komm nicht so richtig mit...
Also wenn ich das richtig verstehe, dann muss ich in den HTML-Teil folgendes Script einbauen:

Code:
document.addEventListener('DOMContentLoaded', function(event) {
if(var1 == 0){
document.getElementById(1).src = "null.gif";
}
elseif (var1 == 1){
document.getElementById(1).src = "eins.gif";
,1000}
Im div-container(id1) steht dann nichts mehr drin?
Sorry, hab wirklich noch nie was mit Java-Script zu tun gehabt - merkt man, gell.
 
Du hast jetzt addEventListener und setInterval verwechselt. Es müsste etwa so aussehen:
Code:
setInterval(function() {
    // hier mit Ajax die Daten holen wie in der Kurzanleitung
    // beschrieben
}, 1000);
Ich empfehle dann, die Zustände als Array zu übertragen. Dann kannst Du die Anzeige wie folgt in der success-Funktion durchführen:
Javascript:
success: function(data) {
    for (var i = 0; i < data.length; i++) {
        if (data[i]) {
            document.getElementById("status" + (i + 1)).src = "eins.gif";
        } else {
            document.getElementById("status" + (i + 1)).src = "null.gif";
        }
    }
}
Die IDs müssen dann so aufgebaut sein:
<img id="status1">
 
Vielen vielen Dank für Deine Mühe.
Funktioniert noch nicht,wahrscheinlich hab ich Mist gebaut...

Das habe ich nun im Head-Bereich:
Code:
<script type="text/javascript">
   setInterval(function() {
    var status = new Array(1, 1, 0, 0);
    success(status);
}, 1000);

success: function(data) {
    for (var i = 0; i < data.length; i++) {
        if (data[i]) {
            document.getElementById("status" + (i + 1)).src = "eins.gif";
        } else {
            document.getElementById("status" + (i + 1)).src = "null.gif";
        }
    }
}
</script>

Und das steht im div-container id1
Code:
<div id="1">
   <img id="status1" width="100px" height="10px" alt="">
</div>

Völlig daneben,oder?
 
Ja, mit C und Python habe ich schon viel gemacht. Php ist mir auch nicht fremd, allerdings handelt mein letztes, gekauftes Buch noch von PHP4 - ist also schon ein Weilchen her . Mit JavaScript hatte ich noch nichts zu tun - naja, außer ein bisschen copy-paste in Homepages - Besucherzähler usw.
 
Nein, nicht unbedingt vollständig daneben, als erster Schritt, um sich der Sache anzunähern, ist es nicht verkehrt. Warum es noch nicht funktioniert ist, dass die Funktionsdefinition, die ich dir gegeben habe, sich auf die Verwendung in $.ajax bezieht. In deinem letzten Testcode müsstest Du sie so definieren, wie Du es von C kennst:
Code:
        function success(data) {
            for (var i = 0; i < data.length; i++) {
                if (data[i]) {
                    document.getElementById("status" + (i + 1)).src = "images/bar10.gif";
                } else {
                    document.getElementById("status" + (i + 1)).src = "images/bar1.gif";
                }
            }
        }
Wenn ich das so in eine Testseite einfüge und das HTML ergänze, funktioniert es so weit, dass die Grafiken entspr. Status richtig angezeigt werden.
 
Zurück