php und Ajax


#1
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
 

Sempervivum

Erfahrenes Mitglied
#2
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?
 
#3
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.
 

Sempervivum

Erfahrenes Mitglied
#4
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.
 
#5
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.
 

Sempervivum

Erfahrenes Mitglied
#6
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">
 
#8
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?
 
#9
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.
 

Sempervivum

Erfahrenes Mitglied
#10
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.
 
#11
Es geht tatsächlich. Vielen Dank dafür.
Jetzt muss ich nur noch schauen, dass das Script auch die Daten aus php holt. Da es die selbe Datei ist, sollte es kein Problem sein.

Ich wünsche Dir noch ein schönes Wochenende.
Gruß
Chris
 

Sempervivum

Erfahrenes Mitglied
#12
Ja, dann fehlt dir nur noch das Ajax. Das ist auf der Seite, die ich oben gepostet habe, gut beschrieben. Allerdings wirst Du zwei Dateien brauchen, eine, die die Daten mit Ajax abholt und durch die Grafiken anzeigt und eine PHP-Datei, die die Daten aus der DB liest und als JSON-kodiertes Array bereit stellt.
Ich wünsche ebenfalls ein schönes Wochenende!
 
#13
Ubs, ich dachte, das Script macht jetzt schon alles was es soll....
Hab es hochgeladen und das GIF wurde angezeigt. Leider habe ich noch nicht getestet, ob es dynamisch und ohne Seiten-Reload geladen bzw. geändert wird.
Könntest Du hier noch einmal unterstützen?
Sorry...
 

Sempervivum

Erfahrenes Mitglied
#14
Kein Problem. Nein, ohne das Ajax ist es noch in keiner Weise dynamisch, weil das Array ja statisch definiert ist. Du müsstest es folgender Maßen ändern:
Code:
        setInterval(function () {
            $.ajax({
                url: "getdata.php",
                dataType: "json",
                success: mysuccess
            });
        }, 1000);
        function mysuccess(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";
                }
            }
        }
Den Funktionsnamen habe ich mal auf mysuccess geändert, weil es sonst etwas verwirrend wäre, wenn links und rechts vom Doppelpunkt das selbe steht. Würde aber auch funktionieren.
 
#15
Also,
ich habe jetzt den Code eingebaut und die getdata.php erstellt, die die Daten der letzten id aus der Datenbank holt und per ->bind_result den Inhalt den variablen var1, var2, var3, var4 zuweist.

Jetzt sagtest Du, in der getdata.php muss ich jetzt ein JASON-codiertes ARRAY erzeugen.
In der Kurz-Anleitung wird das in der sendInfo.php gemacht, oder?
 

Sempervivum

Erfahrenes Mitglied
#16
Leider lässt mich diese Kurzanleitung nicht mehr herein sondern will ein Login mit Facebook oder Google, so dass ich nicht mehr genau weiß, was dort steht. Ich habe es jedoch inzwischen in meine Testseite aufgenommen und mit diesem getdata.php funktioniert es:
PHP:
<?php
$status = Array(1,1,0,0);
echo json_encode($status);
?>
D. h. wenn ich mit dem Editor den Inhalt des Arrays ändere, reagiert die Anzeige der Grafiken und zeigt dynamisch die richtigen Zustände an.
 
#17
Könnte man nicht alles in einer Datei machen? Also anstelle von getdata.php die Abfrage der Datenbank und die HTML--Ausgabe mit dem JAVA/AJAX-Script in einer datei (index.php)?
 

Sempervivum

Erfahrenes Mitglied
#18
Könnte man schon, aber dann wird es komplizierter: Du müsstest mit dem Ajax die ganze index.php aufrufen und bekämst dann das ganze HTML, inkl. dem, was durch PHP generiert wurde und müsstest dann mühsam die Werte der Variablen irgend wie heraus suchen. Bei einem (Affen-)Formular geht das noch ganz gut, aber für eine solche Anwendung wie bei dir ist es weniger zu empfehlen.
 
#19
Schade, bei mir lädt nichts dynamisch.
Wenn ich mit dem editor die getdata.php ediere und alles auf "0" setze, reagiert die Website nicht. Erst bei einem reload verschwindet das GIF.
 

Sempervivum

Erfahrenes Mitglied
#20
Werden denn die GIFs angezeigt? Das wäre dann schon ein gutes Zeichen, weil es bedeuten würde, dass das Ajax und die getdata.php zumindest ohne Fehler durchlaufen.
Wenn es gar nicht funktioniert, dann poste doch noch Mal deinen vollständige Code einschl. HTML, aber vor allem das PHP.
 

Neue Beiträge