ESP88266 invio JSON a Pagina Web

Buona sera a tutti.
Non essendo esperto dei meccanismi WEB stavo facendo delle prove. In pratica ho configurato il Mio Esp88266 come web Server, e collegandomi all'indirizzo IP che stampa in seriale apre una pagina web dove è presente: una select ed un pulsante. Premendo il pulsante, mando una richiesta al server; il quale dovrebbe rispondere con una stringa in formato JSON. Lato Client si dovrebbe popolare la select con il contenuto passato dal Serve. Il problema è che per qualche istante la select viene popolata, poi si resetta la pagina e questa ritorna vuota.
Questo è il codice:

#include <ESP8266WebServer.h>
#include <ArduinoJson.h>
#include <ESP8266WiFi.h>

ESP8266WebServer server;

char web[] PROGMEM = R"=====(
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test Config Wifi ESP8826</title>
</head>
<body>
<form>
  <fieldset>
    <div>
    <select id="lista" name="listWiFi" size="30">
    </select>
      </div>
    <div>
    <button id="scan" onClick="requestScannWifi()" >SCAN</button>
  </div>
      </fieldset>
</form>

  <script>
    
    function requestScannWifi(){
      let xhr = new XMLHttpRequest();
      let url = "/scann";
      let list = document.getElementById('lista');
      xhr.onreadystatechange = function(){
        if(xhr.readyState==4 && xhr.status == 200){
          if (xhr.responseText!=null){
            let jsonRequest = JSON.parse(xhr.responseText);
            for (n=0;n<jsonRequest.SSID.length;n++){
              let option = document.createElement("option"); 
              let txt = document.createTextNode(jsonRequest.SSID[n]);
              option.appendChild(txt);
              list.insertBefore(option,list.lastChild);
            }
          }     
        }
      }
      xhr.open("GET",url,true);
      xhr.send();

    }
    
  </script>
  
</body>
</html>
)=====";

void setup() {
   Serial.begin(115200);
   WiFi.softAPdisconnect(true);
   WiFi.disconnect(); 
   WiFi.mode(WIFI_STA);
   WiFi.begin(SSID,PW);

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

   server.on("/",[](){server.send_P(200,"text/html", web);});
   server.on("/scann",HTTP_GET,scanzione);
   server.begin();
}

void loop() {
  server.handleClient();

}
void scanzione(){
  Serial.println("Invio Wifi");
  const size_t dimensioni = JSON_ARRAY_SIZE(4);
  DynamicJsonDocument doc (dimensioni);

  JsonArray list = doc.createNestedArray("SSID");
  list.add("Wifi_1");
  list.add("Wifi_2");
  list.add("Wifi_3");
  list.add("Wifi_4");
  
  String message = "";
  serializeJson(doc,message);
  Serial.println(message);
  server.send(200,"application/json",message);
  delay(500);
}

Che errore commetto???
Chiedo scusa per la banalità del codice e vi ringrazio in anticipo, spero di non aver sbagliato canale

Oltre a quello grammaticale con il nome della funzione :face_with_hand_over_mouth: :stuck_out_tongue_winking_eye:
stai usando una form html che di default dopo l'evento onsubmit (generato nel momento in cui clicchi sul pulsante), fa un refresh della pagina in automatico e quindi viene ripristinato tutto come all'inizio.

Un possibile modo per evitarlo è aggiungiere l'istruzione "return false" all'evento in oggetto.

<form onsubmit="return false">

Grazie 100000 provo. Ho riletto il post diverse volte prima di pubblucarlo... :relaxed: :joy: ma mi è sfuggito....

Chiedo scusa se ho risposto solo ora. lo sketch ha funzionato correttamente, ho tolto l'oggetto form

This topic was automatically closed 120 days after the last reply. New replies are no longer allowed.