Currently as beginner , I tried to add data in current page (html) from arduino without success (all tutorials shows reloading page or handling get request.
Here is my arduino code :
#include "WiFi.h"
#include "SPIFFS.h" //
#include "ESPAsyncWebServer.h"
// the setup function runs once when you press reset or power the board
const char* ssid = "MyESP32AP";
const char* password = "testpassword";
IPAddress local_ip(192, 168, 1, 1);
IPAddress gateway(192, 168, 1, 1);
IPAddress subnet(255, 255, 255, 0);
const char* PARAM_INPUT_1 = "BTN_SEARCH";///"input1";
AsyncWebServer server(80);
void setup()
{
Serial.begin(115200);
WiFi.softAP(ssid, password);
WiFi.softAPConfig(local_ip, gateway, subnet);//
Serial.println();
Serial.print("IP :");
Serial.println(WiFi.softAPIP());
if (!SPIFFS.begin()) {
Serial.println("An Error has occurred while mounting SPIFFS");
return;
}
server.on("/panel", HTTP_GET, [](AsyncWebServerRequest* request) {
request->send(SPIFFS, "/index_html.html", "text/html");
});
server.on("/get", HTTP_GET, [](AsyncWebServerRequest* request) {
String inputParam = PARAM_INPUT_1;
String inputMessage = request->getParam(PARAM_INPUT_1)->value();
if (inputMessage == "searchAP")
{
request->send(SPIFFS, "/index_html.html", "text/html");
//Here is my problem , I would like to keep the same page and insert the data !
}
/*
request->send(200, "text/html", "HTTP GET request sent to your ESP on input field ("
+ inputParam + ") with value: " + inputMessage +
"
<a href=\"/panel\">Return to Home Page</a>");
*/
});
server.on("/test.js", HTTP_GET, [](AsyncWebServerRequest* request) {
request->send(SPIFFS, "/test.js", "text/javascript");
});
server.begin();
//WiFi.mode(WIFI_STA);
//WiFi.disconnect();
delay(100);
Serial.println("Hello From VS2019 !");
Serial.println("Setup done");
}
// the loop function runs over and over again until power down or reset
void loop() {}
if (inputMessage == "searchAP")
{
request->send(SPIFFS, "/index_html.html", "text/html");
//Here is my problem , I would like to keep the same page and insert the data !
}
You want to edit /index_html.html on the fly (dynamically) before sending it ?
I suppose you could read it line by line and stream it out or write to another SPIFFS file and then send it (not ideal for flash memory, though)
Can you give an example of the sort of change you want to make. There may be other ways of achieving the same thing.
You could embed a place holder such as "@<>@" in the file. Get the whole thing into a String object and replace the placeholder with your new text using a the replace() method, then send the String object.
You could use javascript to do a return to the server to collect the supplementary information to be added to index.html and let javascript add it. This can also be useful if you have a fully static html page which you want to populate with variable data.
You have to use XMLHttpRequest() or similar in javascript to make a return call to the server to fetch more data.
This example:
// http://stackoverflow.com/questions/3038901/how-to-get-the-response-of-xmlhttprequest
// needs error handling
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == XMLHttpRequest.DONE) {
document.getElementById("jsonIn").value = xhr.responseText ;
}
}
xhr.open('GET', '/json', false);
xhr.send(null);
issues a call back to the server with path /json and puts the result in an HTML field jsonIn. That is a json format string and further javasscript parses it and populates the remaining HTML fields on the document. That way, the initial page which is sent is static HTML. The data for the fields is then retrieved indirectly via the onLoad event in the browser.