Modifier un élément de la page HTML présent chez le client.

**mormic** · 31/07/2023, 19h19

Bonjour à nouveau pour encore un problème de compréhension certainement:
J'ai créé une page HTML que j'envoie à un client sur demande.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <title>Commande Leds</title>
  </head>
  <body>
    <h1>Etat des leds</h1>
      <h2 id="etatLed1", Led1 éteinte></h2>
      <h2 id="etatLed2", Led2 éteinte></h2>
    <h1>Boutons de commande</h1>
    <button onclick="appServeur('/led1',actionLed1)">Basculer Led1</button>
    <button onclick="appServeur('/led2',actionLed2)">Activation Led2</button>
    <script>
      function appServeur(url,cFonction){
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function(){
          if(this.readyState==4 && this.status==200){
            cFonction(this);
          }
        };
        xhttp.open("GET", url, true);
        xhttp.send();
      }
      function actionLed1(xhttp){
        document.getElementById("etatLed1").innerHTML = "LED1 " + xhttp.responseText;
      }
      function actionLed2(xhttp){
        document.getElementById("etatLed2").innerHTML = "LED2 " + xhttp.responseText;
      }
    </script>
  </body>
</html>

J'ai créé des API pour contrôler les éléments:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
void handleAPI(){
  String reponse;
  if(serveur.args()>0){
    if(serveur.argName(0) == "Etat" && serveur.args() == 1){
      if(serveur.arg(0) == "Led1") reponse = led1.etat? "allumee" : "eteinte";
      else if((serveur.arg(0) == "Led2")) reponse = led2.etat? "cligne" : "Eteinte";
      else reponse = " Commande inconnue";
    }
    else if(serveur.args() == 3 && serveur.argName(0) == "Cmd" && serveur.arg(0)=="Led2" &&
            serveur.argName(1) == "action" && serveur.arg(1) == "ON" &&
            serveur.argName(2) == "val" &&
            serveur.arg(2).toInt() > 299 && serveur.arg(2).toInt() < 2001){
              cligneOn=true;
              duree = serveur.arg(2).toInt();
              reponse = "Led2 en clignotement";
    }
    else reponse = "Argument inconnu";
  }
  else reponse= "API sans parametre";

Je voudrais pouvoir envoyer une commande en fonction de la réponse du client, pour modifier les éléments h2 par exemple, sans recharger toute la page.
Je ne vois pas comment faire car si je refais un send(200,...) j'efface la page?

**Jay M** · 31/07/2023, 21h24

Il faudrait lire des tutos sur AJAX et le DOM

Modifier un élément de la page HTML présent chez le client.

Arduino

Vue hybride

Discussions similaires

Partager

Partager