Voici la page HTML initiale. Lorsque le serveur reçoit un POST avec le message "configuration", il envoie une deuxième page HTML sensée permettre l'entrée de la configuration. J'ai contrôlé, l'envoi de la deuxième page s'effectue bien mais ne s'affiche pas sur le client.
<!DOCTYPE html>
<!--*****************Balisage chargé dans la mémoire SPIFFS d'un ESP8266************-->
<html>
<head>
<title>ESP8266 Web Sever</title>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" type="image/x-icon" href="data:image/png;base64,
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
4NdhiWeTAwAAAABJRU5ErkJggg=="/>
<!--******************************************************************************-->
<script type="text/javascript">
function action(num, btn, pou) {
// *******************toggle class***************
var myButton = btn;
var myPou = pou;
var className = " " + myButton.className + " ";
if (~className.indexOf(" ex1 ")) {
btn.className = className.replace(" ex1 ", " ex2 ");
}
else {
btn.className = className.replace(" ex2 ", " ex1 ");
}
// *******************fin toggle class***********
var msg = "";
if (myPou) {
msg = "/btn" + num + "/pou!";
}
else {
msg = "/btn" + num + "/non!";
}
var xhr = new XMLHttpRequest();
xhr.open("POST", "/");
xhr.send(msg);
}
<!--**********lance une demande de mise à jour des paramètres******-->
setInterval(function(){maj();},30000);
function maj(){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if (this.readyState == 4 && this.status == 200){
var temp = this.responseText.substr(0,5);
temp = temp.replace(".",",");
var humi = this.responseText.substr(5,5);
humi = humi.replace(".",",");
var pres = this.responseText.substring(10);
pres = pres.replace(".",",");
document.getElementById("Temp").innerHTML = "La température est: " + temp + " °C";
document.getElementById("Humi").innerHTML = "L'humidité relative est: " + humi + " %";
document.getElementById("Pres").innerHTML = "La pression atmosphérique est: " + pres + " hPa";
majHeure();
}
};
xhr.open("POST", "/");
xhr.send("/param");
}
</script>
<script type="text/javascript">
<!--********lance la demande de page de configuration***************-->
function configuration(){
var xhr = new XMLHttpRequest();
xhr.open("POST", "/");
xhr.send("/config");
}
<!--********envoi une mise à jour de l'heure*************************-->
function majHeure(){
var d = new Date();
var mois =["janvier","février","mars","avril","mai","juin","juillet","août","septembre","octobre","novembre","décembre"];
var jour =["dimanche","lundi","mardi","mercredi","jeudi","vendredi","samedi"];
var dateActuel = jour[d.getDay()] + " " + d.getDate() + " " + mois[d.getMonth()] + " " + d.getFullYear() + " à " + d.getHours()+":"+d.getMinutes()+":"+d.getSeconds();
document.getElementById("horloge").innerHTML = "Mise à jour le " + dateActuel;
}
</script>
</head>
<!--***********************************************************************-->
<style>
.ex1, .ex2 {
width: 110px;
padding: 6px;
color: white;
background-color: skyblue;
display: inline;
margin: 2px;
border: none;
border-radius: 4px;
text-decoration: none;
font-size: 16px;
cursor: pointer;
}
.ex2 {
background-color: red;
}
.ex3 {
border-style: double;
border-color: MediumSeaGgreen;
width: 500px;
padding: 20px;
margin: auto;
background-color: AliceBlue;
text-align: left;
}
html {
font-family: Arial;
display: inline-block;
margin: 0px auto;
text-align: center;
}
h1 {
color: #0f3376;
padding: 2vh;
}
h2 {
font-size: 13px;
font-style: italic;
}
p {
font-size: 1.5rem;
}
label {
font-size: 12px;
margin: 10px;
}
.button {
cursor: pointer;
}
.button:hover {
background-color: green;
}
.button:active {
background-color: black;
}
</style>
<!--*******************************************************************-->
<body>
<h1>Thermo/Hygro/Baro-mètre</h1>
<h2 id="horloge"> Date et heure de mise à jour</h2>
<p style=font-size:12px>Etat des commandes</p>
<div> <p class="ex1">Off</p> <p class="ex2">On</p> </div>
<br></br>
<button onclick="configuration()">Configuration</button>
<br></br>
<!--****La fin du balisage est dans le prog de l'ESP8266*******************--><div>
<button class="button ex1" id="btn0" onclick= "action(0,this,0)">Interrupteur 1</button>
<button class="button ex1" id="btn1" onclick= "action(1,this,1)">Poussoir 2</button>
<button class="button ex1" id="btn2" onclick= "action(2,this,0)">Interrupteur 3</button>
<button class="button ex1" id="btn3" onclick= "action(3,this,0)">Interrupteur 4</button>
</div>
<p id="message">Commande manuelle: appuyer sur la touche désirée</p><br><br><p class="p ex3" id="Temp">La température est: 24,96 °C </p><br><br><p class="p ex3" id="Humi">L'humidité relative est: 36,73 %</p><br><br><p class="p ex3" id="Pres">La pression atmosphérique est: 995,91 hPa</p></body></html>
