Javascript Button oder Link mit POST Übergabe

haiflosse · 31. August 2020

Hallo!

Ich verwende hier eine html Seite auf einem Webserver eines Arduino.

Der Code sieht wie folgt aus

HTML

<!DOCTYPE HTML><html lang='de'><head><meta charset='UTF-8'><meta name=viewport content='width=device-width, initial-scale=1'>\
<style>button{width:120px;height:30px}body{background: #87cefa;}</style><title>Login Manager</title></head><body><h2>SSID Passwort</h2><form><p><label>SSID:<br>\
<input name='ssid' placeholder='Name vom Netzwerk' required></label></p><p><label>Passwort:<br><input name='passwort' pattern='[!-~]{8,64}' placeholder='PW vom \
Netzwerk' required></label></p><button type='button'>Absenden</button></form><script>document.querySelector('button').addEventListener('click',() =>{var elem = \
document.querySelector('form');if(elem.checkValidity() && document.querySelector('[pattern]').checkValidity()){fetch('/',{method:'post',body:new FormData(elem)})\
.then(response =>{return response.text()}).then(text =>{document.body.innerHTML = text})}})</script></body></html>

Es handelt sich um eine Eingabe des Benutzernamen und Passwort für einen wlan Zugang.

Ich möchte dies nun so erweitern, dass über einen Link oder weiteren Button irgendein Wert z.B. loeschen=1 oder loeschen=true per POST übergeben wird, so dass ich dann diesen eingetragenen Benutzeramen und Passwort wieder löschen kann.

Das speichern des Benutzernamen und Passwort sieht wie folgt aus:

Code

void handleConfig() {
if (server.hasArg(....) {
    File file = SPIFFS.open("/login.txt", "w");
    file.printf("%s\n%s", "", ""); //Werte löschen
    file.close();
    server.send(200, "text/html", HTML2);
    delay(500);
    Connect();
}  
if (server.hasArg("ssid") && server.hasArg("passwort")) {
    File file = SPIFFS.open("/login.txt", "w");
    file.printf("%s\n%s", server.arg(0).c_str(), server.arg(1).c_str());
    file.close();
    server.send(200, "text/html", HTML2);
    delay(500);
    Connect();
  }
}

Alles anzeigen

Ich habe dort bereits oben eine Bedingung eingebaut wo die Werte wieder gelöscht werden. Da benötige ich nun noch einen Wert bei .... den ich über die Webseite schicken möchte.

Die untere Bedingung speichert den Benutzernamen und Passwort.

Hoffe da kann mir jemand weiterhelfen.

Vielen Dank

Fips · 31. August 2020

Der Esp8266 ist kein Arduino!

haiflosse · 31. August 2020

Sorry

Sempervivum · 1. September 2020

Versuche diese HTML und Javascript:

Code

    <h2>SSID Passwort</h2>
    <form>
        <p><label>SSID:<br>
                <input name="ssid" placeholder="Name vom Netzwerk" required></label></p>
        <p><label>Passwort:<br>
                <input name="passwort" pattern="[!-~]{8,64}" placeholder="PW vom Netzwerk" required>
            </label></p>
        <button type="button" id="send">Absenden</button>
    </form>
    <button type="button" id="delete">Löschen</button>
    <script>
        document.querySelector('#send').addEventListener('click', () => {
            var elem = document.querySelector('form');
            if (elem.checkValidity() && document.querySelector('[pattern]').checkValidity()) {
                fetch('/', {
                    method: 'post',
                    body: new FormData(elem)
                }).then(response => { return response.text() })
                    .then(text => { document.body.innerHTML = text });
            }
        });
        document.querySelector('#delete').addEventListener('click', () => {
            let fd = new FormData();
            fd.append('delete', 'true');
            fetch('/', {
                method: 'post',
                body: fd
            }).then(response => { return response.text() })
                .then(text => { document.body.innerHTML = text });
        });
    </script>

Alles anzeigen

Und dann den POST-Parameter abfragen:

Code

void handleConfig() {
if (server.hasArg("delete") {
    File file = SPIFFS.open("/login.txt", "w");
    file.printf("%s\n%s", "", ""); //Werte löschen
    file.close();
    server.send(200, "text/html", HTML2);
    delay(500);
    Connect();
}  
if (server.hasArg("ssid") && server.hasArg("passwort")) {
// usw.

Alles anzeigen

Ungetestet, weil ich die Hardware nicht habe.

Fips · 2. September 2020

@Sempervivum

Danke für deine Bemühungen.

Aber!

Dem TO ist die dahinterstehende Logik noch nicht ganz klar.

Die in #1 gezeigte Webseite wird im nur im AP Modus des Webservers ausgeliefert.

Hat er die Zugangsdaten erhalten geht der Microcontroller in den STA Modus und verbindet sich mit dem Router.

Außerdem möchte haiflosse anschließend den DeepSleep des Controllers nutzen, wodurch ein Verbindungsaufbau von außen so ziemlich aussichtslos wird.

Javascript Button oder Link mit POST Übergabe

Jetzt mitmachen!

Teilen