Slider to JS variable

[Rolf B]

Hallo Alois,

   .forEach(slider => {
      // String mit Slider-Wert erweitern
      myString.push(slider.name + "&" + slider.value);   });
   strOut = myString+"#";

kann man machen. Aber das ist alles andere als Standard.

• myString nennt sich String, ist aber ein Array. Diese Variable sollte "myParams" oder so heißen, um keine falsche Suggestion zu tragen
• Ein Array und einen String mit "+" zu verketten geht, weil JavaScript da gnädiger ist als der liebe Gott. Es konvertiert das Array dadurch zu einem String, und tut das so, dass es die Array-Einträge kommagetrennt aneinanderpappt.
• Du verwendest das Komma zum Trennen der Parameter und das & als Trennzeichen für Name und Wert - bei einer Übergabe an den Server ist das & aber eigentlich als Trennzeichen für die Parameter gängig und ein = als Trenner zwischen Name und Wert.

Dein 12 Monate älteres Ich, das diesen Code liest und seitdem mehr gelernt hat, wird Dich dafür HASSEN.

Vor allem, weil Du auf dem Server nun die Parameter in Eigenregie wieder auseinandernehmen musst.

Vorschlag:

   const url = new URL("http://mein-esp32/set_temp.php");
   document
    .querySelectorAll('input[type="range"]')
    .forEach(slider => {
      // URL mit Slider-Wert erweitern
      url.searchParams.append(slider.name, slider.value);
    });
   document.getElementById("Out").textContent = url.toString(); });

Damit bekommst Du eine fertige URL, wo die Parameter als URL Parameter drinstehen. "mein-esp32" musst Du natürlich geeignet ändern.

Damit kannst Du einen POST-Request an deinen ESP32 machen (ja, POST, weil Du was änderst - ein GET Request ist hier falsch). Dass die Parameter in der URL statt im Body übergeben werden, ist erlaubt.

Also so:

const xhr = new XMLHttpRequest();
xhr.open("POST", url.toString());
xhr.send();

Oder als Einzeiler so:

fetch(url.toString(), { method: 'POST') });

Das .toString() kannst Du vermutlich sogar weglassen, ich kann es gerade nur nicht ausprobieren.

Im PHP findest Du dann in $_SERVER['REQUEST_METHOD'] den Wert 'POST' vor, um den Requesttyp zu erkennen, und im $_GET Array die übergebenen Daten. Wenn Du denn PHP auf dem ESR verwendest und nicht irgendwas anderes.

Rolf