Daten aus Datenbank mit Button Click auf Homepage aktualisieren

[Maria D. aus B.]

Liebe Forum-Freunde,

In meiner Datenbank (Maria-DB) für eine Pflanzenbewässerung, werden Daten über den Füllstand des Wassertanks regelmäßig und automatisch eingetragen. Auf meiner Webseite kann ich den aktuellsten Wert anfragen und das Ergebnis in die Variable $water_level speichern:

$sql = "SELECT water_level FROM plant ORDER BY rec_id DESC LIMIT 1";
foreach ($con->query($sql) as $water_level){
}

... und wie folgt ausgeben lassen:

<h8>Wasserbehälter ist noch zu <?=$water_level['water_level']?> % gefüllt</h8>

Nun ist es unvorteilhafter weise so, dass ich zum Aktualisieren des Wasserstandes die gesamte Seite aktualisiere:

<h7><button onClick="window.location.reload();">Wasserfüllstand aktualisieren</button></h7>

Der gesamte Quellcode ist in einer php-Datei gespeichert. (--> Ich habe oft gelesen das man mehrere benötigt)

Mein Ziel ist es jedoch, mithilfe des Buttons >Wasserfüllstand aktualisieren< lediglich den letzten Wert aus der Datenbank in die Variable $water_level zu speichern und anzeigen zu lassen, ohne die gesamte Seite re-freshen zu müssen. Ich denke es mit AJAX umsetzen zu können, bin aber total verzweifelt wie ich dieses in die Tat umsetzen kann, weshalb ich mich mit diesem Anliegen an euch wende.

Ich bedanke mich schon recht herzlich für eure Bemühungen
Maria

 

[Sempervivum]

Hallo Maria und willkommen im Forum!
Mit Ajax bist Du genau auf dem richtigen Wege. Sieh dir hier das erste einfache Beispiel an und versuche, ob Du damit zum Ziel kommst:
Using the Fetch API - Web APIs | MDN
Du brauchst dann ein minimales PHP-Skript, was nur den Wert des Wasserstandes mit echo ausgibt.
Viel Erfolg und beste Grüße - Ulrich

 

[Maria D. aus B.]

Hallo Ulrich,

vielen Dank für deine Antwort! Das PHP Skript habe ich erstellt. Es gibt mir den entsprechenden Wert zurück.
Bzgl des Beispiels: Using the Fetch API - Web APIs | MDN frage ich mich gerade welche URL ich dort statt der Beispiel URL einzufügen hab.

fetch('http://example.com/movies.json')

Ist dieser 3 Zeiler:

fetch('http://example.com/movies.json')
  .then(response => response.json())
  .then(data => console.log(data));

... schon das zu implementierende AJAX Konstrukt? D.h. ich habe am Ende 2 PHP Files: --> Eines, in dem ich die aufzurufende Seite programmiere inkl. AJAX Code und eines, in dem ich den letzten Wert mit echo zurück gebe?

Ich bin ziemlich neu im Thema JS/AJAX/JSON was das ganze erschwert zu verstehen :/

Danke für die Bemühungen

 

[Sempervivum]

frage ich mich gerade welche URL ich dort statt der Beispiel URL einzufügen hab.

Du musst die URL des neuen PHP-Skriptes dort eintragen. Am besten relativ, d. h. nur den Dateinamen sofern das Skript im selben Verzeichnis wie die Hauptdatei liegt.

D.h. ich habe am Ende 2 PHP Files: --> Eines, in dem ich die aufzurufende Seite programmiere inkl. AJAX Code und eines, in dem ich den letzten Wert mit echo zurück gebe?

Ganz genau. Den Dreizeiler brauchst Du nur im zweiten then zu erweitern um den Wert, der vom Server kommt, in den Container einzutragen, wo er angezeigt werden soll:

<h8>Wasserbehälter ist noch zu <span id="water-level"></span> % gefüllt</h8>

fetch('dein-script.php')
  .then(response => response.json())
  .then(data => {
    console.log(data));
    document.getElementById('water-level').textContent = data;
  });

 

[Maria D. aus B.]

Ich habe das Gefühl das mit der Syntax etwas nicht stimmt (?) weil ich
a) kein Wert auf meiner Webseite angezeigt bekomme und
b) wenn ich eine .js Datei erstelle und versuche auszuführen erscheint ein Fehler:
Syntaxfehler
Zeile: 2
Zeichen: 19
Code: 800A03EA
Quelle: Kompilierungsfehler in Microsoft JScript

Könntest du bitte noch einmal drüber schauen?
Ist:

<h7><button onClick="was-auch-immer();">Wasserfüllstand aktualisieren</button></h7>

... dann überhaupt notwendig? - Da ohnehin immer der aktuellste Wert auf der Webseite angezeigt wird?

Vielen Dank!!

 

[Sempervivum]

Ich hätte dazu schreiben müssen "ungetestet". Da ist eine schließende Klammer zu viel:

fetch('dein-script.php')
  .then(response => response.json())
  .then(data => {
    // console.log(data));
    console.log(data);
    document.getElementById('water-level').textContent = data;
  });

Ist:
HTML:
<h7><button onClick="was-auch-immer();">Wasserfüllstand aktualisieren</button></h7>
... dann überhaupt notwendig? - Da ohnehin immer der aktuellste Wert auf der Webseite angezeigt wird?

Auf diese Weise mit Ajax wird nicht spontan der Wert aktualisiert sondern nur, wenn das Javascript ausgeführt wird. Du brauchst daher einen Anstoß, z. B. mit Buttonclick, oder Du fragst den Wert zyklisch mit setInterval ab.

 

[Maria D. aus B.]

Super, danke das hat jetzt geklappt! Vielen Dank!