WebServer / auf seite Umleiten nach Submit Button

Hi zusammen,

ich habe ein WebServer der Einstellungen immer an den ESP32 übermittelt und dort schreibt.

Das mache ich mit dem Form- Tag was auch perfekt funktioniert.
Die WebSeite ist : http://IP-Adresse/
Drücke ich auf einen Submit Buton ändert sich ja die IPAdresse (bei dem Bereich den ich als Code angehängt habe)
auf : http://IP-Adresse/?BMEaktiv=on&BMETemp=on&BMEHumi=on&BMEPres=on&lux=on&Sensoren=Sensoren+-+Speichern

Nun habe ich es schon mit allem möglichen ausprobiert und nichts hilft, …
Ich möchte wenn der Submit Button gedrückt worden ist nach ner Sekunde oder weniger (die Daten müssen halt übertragen werden) auf die : http://IP-Adresse/ zurückgeleitet werden.

Ich habe schon mit Java rumgespielt aber sobald es um den Form Tag geht geht fast nichts mehr …

MfG

message += F(   "<form><h3>Sensoren</h3>"
                    "<center><table width=80% border='2' cellpadding='2'><tr>"
                    "<tr><td width=50%>"                   
                    "<form action='/bme280'>BME 280 - Aktivieren: "
                    "</td><td>"
                    "<input type='checkbox' name='BMEaktiv' ");
    if (BME280_aktiv == "true"){                
        message += F(   "checked ");}
    message += F(   ">");
    if (BME280_aktiv == "true"){
        message += F(   "</td></tr>"
                        "<tr><td>"
                        "<form action='/bme280'>Temperatur - Aktivieren: "
                        "</td><td>"
                        "<input type='checkbox' name='BMETemp' ");
        if (BME280_Temp == "true"){                
            message += F(   "checked ");}
        message += F(   ">");
        message += F(   "</td></tr>"
                        "<tr><td>"
                        "<form action='/bme280'>Luftfeuchte - Aktivieren: "
                        "</td><td>"
                        "<input type='checkbox' name='BMEHumi' ");
        if (BME280_Humi == "true"){                
            message += F(   "checked ");}
        message += F(   ">");
        message += F(   "</td></tr>"
                        "<tr><td>"
                        "<form action='/bme280'>Druck - Aktivieren: "
                        "</td><td>"
                        "<input type='checkbox' name='BMEPres' ");
        if (BME280_Pres == "true"){                
            message += F(   "checked ");}
        message += F(   ">");
    }   
    message += F(   "</td></tr>"
                    "<tr><td width=50%>"                   
                    "<form action='/lux'>Lichtsensor - Aktivieren: "
                    "</td><td>"
                    "<input type='checkbox' name='lux' ");
    if (Lux_aktiv == "true"){                
        message += F(   "checked ");}
    message += F(   ">");
    message += F(   "</td></tr>"
                    "</table></center>
"        
                    "<input type='submit' value='Sensoren - Speichern' name='Sensoren'>"
                    "</form>");

Übertrage die Daten mit POST ("im Body") und nicht als GET ("im URL") - dann sieht der Anwender auch nicht die Parameter, der URL bleibt (bzw. ist genau das Ziel), du brauchst nichts nachladen / verändern.

Besonders am ESP ist es ohnehin kein Problem Parameter auszulesen, und dann ist es egal ob diese mittels GET oder POST übertragen wurden.

Lesestoff auf selfhtml:

https://wiki.selfhtml.org/wiki/HTML/Tutorials/Formulare/Was_ist_ein_Webformular%3F#Die_Daten.C3.BCbertragung

bzw. auch eine kurze Erklärung auf:
https://werner.rothschopf.net/202009_iot_webserver_esp8266.htm

Hallo,
ich weiß jetzt nicht genau ob ich Dein Problem verstanden habe. Werner hat ja schon geschrieben das Post besser geignet ist wenn es sich um mehere Daten handelt die von der HTML Seite versendet werden.

Eigendlich vermute ich Dein Problem ehr auf der Server Seite. Mit dem "Send" Button willst Du ja die Daten an den Server senden. Bei den ESP bieten sich zur Verarbeitng Handles dazu an. siehe Beispiel Hallo Server. Die HTML Seite ruft mit dem Send Button einen Handle auf. Am einfachsten ist das eine Function im Sketche. Darin wertest Du Die gesendeten Daten aus und sendest danach die HTML Seite eventuell mit den geänderten Daten erneut.

ich hab aus meiner Bastelkiste mal einen Schnipsel rausgesucht der das zeigen soll. Auf der HTML seite gibt es mehrere Slider , zwei Buttons (Ein , Aus) , und einen Send Button (SUBMIT). Der Handle "handleMenue" versendet die HTML Seite. Das ist jetzt nicht die eleganteste Lösung, da ja die komplette Seite erneut gesendet wird. Aber bei einer einfachen HTML Seite sind die Daten der Seite ja ehr gering.

server.on("/", handleMenue);               // Webseite bearbeiten
server.on("/buton", handleAnswer);      // bei Form action Antwort vom Client bearbeiten
server.onNotFound(handleNotFound);   // Fehler bearbeiten


// --------------- Daten vom Client auswerten ---------------
void handleAnswer() {
  int i;
  String text;
  if (server.hasArg("SUBMIT")) { // sende button gedrückt


    text = server.arg("slider1");// LED Speed lesen
    i = text.toInt();
    LEDcycle = i;

    text = server.arg("slider2");// Farb speed lesen
    i = text.toInt();
    LEDspeed_hu = i;

    text = server.arg("slider3");// Helligkeit
    i = text.toInt();
    hell = i;

    text = server.arg("slider4");// Sättigung
    i = text.toInt();
    farbe = i;

  }

  if (server.hasArg("buton1")) {
    LED_ein = true;
  }

  if (server.hasArg("buton2")) {
    LED_ein = false;
    
    LEDoff();
  }
 
                
  handleMenue(); // Seite erneut senden 
}

Mit dem Post klappt es das die URL clean bleibt.
Ich habe derzeit ein Refresh von 5 Sekunden in der Headerdatei eingetragen.

Kann ich das ausführen direkt nach dem Submit dann würde ich die Refresh Zeit wieder hochsetzen.

MfG

kann nicht ganz folgen.

Wenn du einen submit machst, geht das sofort an den Server und es liegt am Server was der nun zurückschickt.
Idealerweise schon eine Seite mit aktuellen Daten.

Warum brauchst du noch einen "schnellen" Refresh?

(wobei man überhaupt diskutieren kann, wozu es generell einen refresh braucht und ob da nicht eine Aktualsierung mit Fetch API günstiger wäre...)

Wäre es garantiert.

Gruß Tommy

Er sendet es leider noch mit den alten Daten,
ich schaue mir Fetch API mal an.

(Ich gehe mal davon aus das der Server eher die Daten schickt, bevor er die Daten aktualiesiert hat)

MfG

das hast aber DU in der Hand.

Du musst in deinem Handler (=die"Seite" an die du den POST schickst) halt ERST die Parameter verarbeiten und DANN erst dem Client die - aktualisierte Seite rausschicken.

Also ich habe im Body das eingebaut :

"<script>"
"setInterval(loadDaten, 2000);"
"loadDaten();"
"function loadDaten(){"
"fetch('/')"
".then( function(response){"
"return response.json();"
"});"
"}"
"</script>"

Seit dem schmiert die WLAn verbindung ab :

[E][WiFiClient.cpp:392] write(): fail on fd 63, errno: 104, “Connection reset by peer”

Meine Handel´s sehen so aus

void WebPage_starten()
{
    if (MDNS.begin("esp8266")) 
    {
        Serial.println(F("MDNS responder started"));
    }
    server.on("/", handle_Main);
    server.on("/f.css", handleCss);

    server.on("/inline", []() {
    server.send(200, "text/plain", "this works as well");
    });

    server.onNotFound(handleNotFound);

    
    server.on("/update", HTTP_POST, []() {
    server.sendHeader("Connection", "close");
    server.send(200, "text/plain", (Update.hasError()) ? "FAIL" : "OK");
    ESP.restart();

wie kann ich den da was eintragen ? habe das noch niergends gesehen …

Dann schaue Dir mal die Beispiele zum ESP8266-Webserver an und die bei Fips.

Gruß Tommy

Hallo,

Ich hab mal was für Einsteiger geschrieben , findest Du hier.Webserver mit Fetch .

Das ist zwar inzwischen nicht mehr ganz auf dem letzten Stand der Technik ist aber als Einstieg gedacht. Wenn Du verscheidene Beispiele suchst findest Du sicher bei Fips etwas passendes.

Heinz

This topic was automatically closed 120 days after the last reply. New replies are no longer allowed.