I made this minimal example in order to figure out how to get requests (or whatever they are called) to display in the serial monitor. However, none of the query parameters (in the URL) can be seen in the serial monitor at 115200 baud.
The files are below and here: https://github.com/adamelli/MinimalExamples/tree/main/22-1-25_query_parameters_submitButton
File structure
sketch (folder)
- sketch.ino
- data (folder)
- index.html
- selection.html
sketch.ino
#include <WiFi.h>
#include <ESPAsyncWebServer.h>
#include <SPIFFS.h>
#include <painlessMesh.h>
const char* ssid = "Wireless Controller";
const char* password = "12345678";
// User stub
void sendMessage() ; // Prototype so PlatformIO doesn't complain
Task taskSendMessage( TASK_SECOND * 1 , TASK_FOREVER, &sendMessage );
void sendMessage() {
taskSendMessage.setInterval( random( TASK_SECOND * 1, TASK_SECOND * 5 ));
}
AsyncWebServer server(80);
void notFound(AsyncWebServerRequest *request) {
request->send(404, "text/plain", "Not found");
}
IPAddress IP(192, 168, 1, 1);
IPAddress gateway(192, 168, 1, 1);
IPAddress subnet(255, 255, 255, 0);
void setup()
{
Serial.begin(115200);
// Initialize SPIFFS
if (!SPIFFS.begin(true))
{
Serial.println("An Error has occurred while mounting SPIFFS");
return;
}
WiFi.softAP(ssid, password);
delay(500);
WiFi.softAPConfig(IP, gateway, subnet);
IPAddress IP = WiFi.softAPIP();
Serial.print("AP IP address: ");
Serial.println(IP);
// Route for root / web page
server.on("/", HTTP_GET, [](AsyncWebServerRequest * request) {
request->send(SPIFFS, "/index.html", String(), false );
});
// Index.HTML NAVIGATION BUTTIONS ************************************************
server.on("/index.html", HTTP_GET, [](AsyncWebServerRequest * request) {
request->send(SPIFFS, "/index.html", String(), false);
});
server.on("/selection.html", HTTP_GET, [](AsyncWebServerRequest * request) {
request->send(SPIFFS, "/selection.html", String(), false );
});
server.on("/", HTTP_GET, [](AsyncWebServerRequest * request)
{
int paramsNr = request->params();
Serial.println(paramsNr);
for (int i = 0; i < paramsNr; i++)
{
AsyncWebParameter* p = request->getParam(i);
Serial.print("Param name: ");
Serial.println(p->name());
Serial.print("Param value: ");
Serial.println(p->value());
Serial.println("------");
}
request->send(200, "text/plain", "message received");
});
server.begin();
}
void loop() {}
index.html
<!DOCTYPE html>
<html>
<body>
<h1>Main Menu</h1>
<p><a href="/selection.html"><button class="button">Selection</button></a></p>
<p><a href="/notMinimal.html"><button class="button">Oblivion</button></a></p>
</body>
</html>
selection.html
<!DOCTYPE html>
<html>
<body>
<!-- -->
<form action="/" method="get">
<label for="size" style="font-size: 22px">Shape Size:</label>
<select name="size" id="size" style="font-size: 22px;">
<option value="1"> 1 </option>
<option value="2"> 1/2 </option>
</select>
<p><label for="speed" style="font-size: 22px">Speed:</label>
<select name="speed" id="speed" style="font-size: 24px">
<option value="1"> Slowest </option>
<option value="2" selected> Regular </option>
</select></p>
<p><a href="/selection"><button class="submit" name="circle" value="3">Circle</button></a></p>
<p><a href="/selection"><button class="submit" name="square" value="4">Square</button></a></p>
</form>
</body>
</html>
The data files must be uploaded via "Tools" → "ESP32 Sketch Data Upload".
How is the data (size and speed) viewable in the serial monitor? What needs to change?
-
1Thank you for making a minimal example! So many people won't bother to do it, and it's a huge help in debugging.romkey– romkey2022年01月26日 00:02:32 +00:00Commented Jan 26, 2022 at 0:02
1 Answer 1
You have two handlers for "/":
server.on("/", HTTP_GET, [](AsyncWebServerRequest * request) {
request->send(SPIFFS, "/index.html", String(), false );
});
and
server.on("/", HTTP_GET, [](AsyncWebServerRequest * request)
{
int paramsNr = request->params();
Serial.println(paramsNr);
for (int i = 0; i < paramsNr; i++)
{
...
Only one will be called when you load the top level page. You'll need to combine them to both serve index.html and process the parameters being passed to it.
answered Jan 26, 2022 at 0:01
-
Thanks, but I still do not understand how to change the request body/message. I just want it to return to the main menu index without changing the content of that main index page. In the ino sketch
request->send(200, "text/plain", "message received")changes the whole main index page. Yet when I take that request part out, the program does not compile.Adam– Adam2022年01月27日 17:35:01 +00:00Commented Jan 27, 2022 at 17:35 -
1@Adam you asked why the parameters are not printed. Well, because the handler in which you print them is never called due to the double definition.Sim Son– Sim Son2022年01月27日 19:07:09 +00:00Commented Jan 27, 2022 at 19:07
-
Yes, but the first definition makes the main menu viewable. You mention combining the two. I tried combining them though trial and error edits, but nothing has worked. One of the two pages always either becomes "Not Found" or clears out to be left with "message received." I suppose I can ask another question, but it's going to be pretty much the same.Adam– Adam2022年01月27日 19:19:01 +00:00Commented Jan 27, 2022 at 19:19
-
1I think what @romkey say "combine" means that you need to something about the two duplicate routes. Not literally combine them. One easy way to fix the problem is to rename your route that handling the params to
server.on("/submit", HTTP_GET, callback_func), and change your selection.html form submission to<form action="/submit" method="get">.hcheung– hcheung2022年01月28日 01:33:51 +00:00Commented Jan 28, 2022 at 1:33 -
1Did you also change the route that handling the params to
server.on("/submit", HTTP_GET, [](AsyncWebServerRequest * request)?hcheung– hcheung2022年01月29日 01:33:08 +00:00Commented Jan 29, 2022 at 1:33