Récupérer les valeurs d’un formulaire web sans rafraîchir la page (jQuery) [ESP32 Ép#5]

Plateforme de développement ESP32: http://bit.ly/2PRyK8h
Flash deals Banggood: http://bit.ly/2upifb4
Faire un don pour soutenir la chaîne: http://bit.ly/35TD7os

jQuery:
https://jquery.com/download/

Types de requêtes HTTP:
https://www.w3schools.com/tags/ref_httpmethods.asp

Arduino Blink without delay:
https://www.arduino.cc/en/tutorial/BlinkWithoutDelay

Autres exemples de code pour récupérer des données de formulaire avec jQuery:

Bonjour! Dans cette vidéo je reprends le code de la vidéo précédente et j’ajoute un formulaire sur l’interface web pour choisir la vitesse de clignotement de la LED. Ainsi, dans cette vidéo je vous montre comment utiliser un formulaire web pour mettre à jour les variables du code C++ de l’ESP32. Pour éviter de rafraîchir la page à chaque mise à jour du formulaire, j’ai choisi de créer un formulaire custom et de récupérer les données en arrière plan avec du javascript (jQuery). Ainsi les requêtes HTTP se font sans que l’utilisateur ne remarque quoi que ce soit. On évite de rafraîchir la page trop souvent et de faire travailler l’ESP32 inutilement. J’espère que cette vidéo vous sera utile!

LE CODE:

HTML

<!DOCTYPE html>
<html lang="fr">

<head>
    <title>Serveur ESP32</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" charset="UTF-8" />
    <link rel="stylesheet" type="text/css" href="w3.css">
    <script type="text/javascript" src="jquery-3.4.1.min.js"></script>
    <script type="text/javascript" src="script.js"></script>
</head>

<body class="w3-animate-opacity">

    <div class="w3-card w3-blue w3-padding-small w3-center">
        <h1>ESP32</h1>
    </div>

    <div class="w3-margin w3-center w3-card w3-padding-24">
        <h3 class="w3-padding">Allumer/Éteindre la LED</h3>
        <button onclick="onButton()" class="w3-button w3-green w3-xlarge w3-ripple w3-wide"
            style="width:40%;">ON</button>
        <button onclick="offButton()" class="w3-button w3-red w3-xlarge w3-ripple w3-wide"
            style="width:40%;">OFF</button>
        <br><br>
    </div>

    <div class="w3-margin w3-center w3-card w3-padding-24">
        <h3 class="w3-padding">Vitesse de clignotement <br> de la LED</h3>

        <select id="choixDelayLed" class="w3-select" style="width:80%;">
            <option value="" disabled selected>Choisir un délais</option>
            <option value="250"> 250 millisecondes</option>
            <option value="1000"> 1000 millisecondes</option>
            <option value="2000"> 2000 millisecondes</option>
        </select>
        
        <br><br>

        <button id="appliquer" class="w3-button w3-white w3-border w3-xlarge w3-ripple w3-wide">Appliquer</button>
    </div>

    <div class="w3-margin w3-center w3-card w3-padding-24">
        <h3 class="w3-padding">Niveau de luminosité</h3>
        <p class="w3-xxlarge"><span id="valeurLuminosite">0</span></p>
    </div>

    <div class="w3-padding w3-center">
        <i><a href="https://TommyDesrochers.com" style="text-decoration: none;">Tommy Desrochers 2020</a></i>
    </div>

</body>

</html>

CSS

Pour le CSS, j’ai utilisé la bibliothèque W3.css disponible ici: https://www.w3schools.com/w3css/
Pour plus d’infos: https://www.w3schools.com/w3css/w3css_downloads.asp
Pour diminuer la taille d’une bibliothèque CSS: https://uncss-online.com/

jQuery

La bibliothèque jQuery est téléchargeable ici: https://jquery.com/download/
Il faut télécharger la version “compressed, production”.

JAVASCRIPT

$(document).ready(function(){
    $("#appliquer").click(function(){
        var valeur = $("#choixDelayLed").val();
        $.post("delayLed",{
            valeurDelayLed: valeur
        });
    });
});

setInterval(function getData() {
    var xhttp = new XMLHttpRequest();

    xhttp.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
            document.getElementById("valeurLuminosite").innerHTML = this.responseText;
        }
    };

    xhttp.open("GET", "lireLuminosite", true);
    xhttp.send();
}, 2000);

function onButton() {
    var xhttp = new XMLHttpRequest();
    xhttp.open("GET", "on", true);
    xhttp.send();
}

function offButton() {
    var xhttp = new XMLHttpRequest();
    xhttp.open("GET", "off", true);
    xhttp.send();
}

C++

#include <Arduino.h>
#include <ESPAsyncWebServer.h>
#include <SPIFFS.h>

const char *ssid = "Nom du réseau";
const char *password = "Mot de passe du réseau";

const int led = 2;
const int capteurLuminosite = 34;

int valeurDelayLed = 1000;
bool etatLed = 0;
bool etatLedVoulu = 0;
int previousMillis = 0;

AsyncWebServer server(80);

void setup()
{
  //----------------------------------------------------Serial
  Serial.begin(115200);
  Serial.println("\n");

  //----------------------------------------------------GPIO
  pinMode(led, OUTPUT);
  digitalWrite(led, LOW);
  pinMode(capteurLuminosite, INPUT);

  //----------------------------------------------------SPIFFS
  if (!SPIFFS.begin())
  {
    Serial.println("Erreur SPIFFS...");
    return;
  }

  File root = SPIFFS.open("/");
  File file = root.openNextFile();

  while (file)
  {
    Serial.print("File: ");
    Serial.println(file.name());
    file.close();
    file = root.openNextFile();
  }

  //----------------------------------------------------WIFI
  WiFi.begin(ssid, password);
  Serial.print("Tentative de connexion...");

  while (WiFi.status() != WL_CONNECTED)
  {
    Serial.print(".");
    delay(100);
  }

  Serial.println("\n");
  Serial.println("Connexion etablie!");
  Serial.print("Adresse IP: ");
  Serial.println(WiFi.localIP());

  //----------------------------------------------------SERVER
  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request) {
    request->send(SPIFFS, "/index.html", "text/html");
  });

  server.on("/w3.css", HTTP_GET, [](AsyncWebServerRequest *request) {
    request->send(SPIFFS, "/w3.css", "text/css");
  });

  server.on("/script.js", HTTP_GET, [](AsyncWebServerRequest *request) {
    request->send(SPIFFS, "/script.js", "text/javascript");
  });

  server.on("/jquery-3.4.1.min.js", HTTP_GET, [](AsyncWebServerRequest *request) {
    request->send(SPIFFS, "/jquery-3.4.1.min.js", "text/javascript");
  });

  server.on("/lireLuminosite", HTTP_GET, [](AsyncWebServerRequest *request) {
    int val = analogRead(capteurLuminosite);
    String luminosite = String(val);
    request->send(200, "text/plain", luminosite);
  });

  server.on("/on", HTTP_GET, [](AsyncWebServerRequest *request) {
    etatLedVoulu = 1;
    request->send(204);
  });

  server.on("/off", HTTP_GET, [](AsyncWebServerRequest *request) {
    etatLedVoulu = 0;
    digitalWrite(led, LOW);
    etatLed = 0;
    request->send(204);
  });

  server.on("/delayLed", HTTP_POST, [](AsyncWebServerRequest *request) {
    if(request->hasParam("valeurDelayLed", true))
    {
      String message;
      message = request->getParam("valeurDelayLed", true)->value();
      valeurDelayLed = message.toInt();
    }
    request->send(204);
  });

  server.begin();
  Serial.println("Serveur actif!");
}

void loop()
{
  if(etatLedVoulu)
  {
    unsigned long currentMillis = millis();
    if(currentMillis - previousMillis >= valeurDelayLed)
    {
      previousMillis = currentMillis;

      etatLed = !etatLed;
      digitalWrite(led, etatLed);
    }
  }
}

Cet article contient des liens affiliés. Cela signifie que je gagne une certaine commission sur les produits achetés à partir de ces liens. C’est majoritairement ainsi que je peux financer mes projets et partager gratuitement mes vidéos sur le web. Alors je souhaite remercier tous ceux qui me soutiennent. C’est grâce à vous que ces vidéos sont possibles!

LE CODE:

HTML

CSS

jQuery

JAVASCRIPT

C++

Plus d'articles: