Question

我正在创建一个用于wifi登录凭据的网页。我在网页上创建了两个文本框，即用户名和密码。我想将在文本框中输入的数据打印到串行监视器。但是我是html编码的新手，我不知道该怎么做。请帮助我。我的代码是：

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include <WiFiClient.h>
#include <ESP8266mDNS.h>
const char* ssid = "JioFi2_09C46E";  // Enter SSID here
const char* password = "dicuiet123";  //Enter Password here
ESP8266WebServer server(80);
WiFiServer server1(80);
void setup() {
  Serial.begin(9600);
  Serial.println("Connecting to ");
  Serial.println(ssid);
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
  delay(1000);
  Serial.print(".");
  }
  Serial.println("");
  Serial.println("WiFi connected..!");
  Serial.print("Got IP: ");  Serial.println(WiFi.localIP());
  Serial.println("HTTP server started");
  server.on("/", handle_OnConnect);
  server.onNotFound(handle_NotFound);
  server.begin();
  server1.begin();  
}
void loop() 
{
 /* WiFiClient client = server1.available();
  if (!client)
  {
    return;
  }
  Serial.println("Waiting for new client");
  while(!client.available())
  {
    delay(1);
  }

  String request = client.readStringUntil('\r');
  Serial.println(request);
  *///client.flush();
  server.handleClient();
}
void handle_OnConnect() 
{
  server.send(200, "text/html", SendHTML(ssid, password)); 

}
void handle_NotFound()
{
  server.send(404, "text/html", "Not Found");
}

String SendHTML(const char* ssid,const char* password)
{
String ptr = "<!DOCTYPE html> <html>\n";
ptr += "<head> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n";
ptr += "<style> body {font-family: Arial, Helvetica, sans-serif;}\n";
ptr += "form {border: 3px solid #f1f1f1;}\n";
ptr += "input[type=text], input[type=password] { width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; box-sizing: border-box; }\n";
ptr += "button { background-color: #4CAF50; color: white; padding: 14px 20px; margin: 8px 0; border: none; cursor: pointer; width: 100%; }\n";
ptr += "button:hover { opacity: 0.8; }\n";
ptr += ".container { padding: 16px; } span.psw { float: right; padding-top: 16px; } }\n";
ptr += "</style>\n";
ptr += "</head>\n";
ptr += "<body> \n";
ptr += "<h2>WiFi Login Page</h2>\n";
ptr += "<form method=\"get\">\n";
ptr += "SSID: <input type=\"text\" id =\"myText1\" name=\"ssid\" value=\"\"><br>\n";
ptr += "Password: <input type=\"text\" id =\"myText2\" name=\"pass\" value=\"\"><br>\n";
ptr += "<button onclick=\"myFunction()\" type=\"submit\" id=\"mySubmit\" value=\"Submit\" formtarget=\"ssid and paasword is:=\">Submit</button>\n";
ptr += "</form>\n";
ptr += "<p id=\"demo\"></p>\n";
ptr += "<p id=\"demo1\"></p>\n";
ptr += "<p id=\"demo2\"></p>\n";
ptr += "<script>\n";
ptr += "function myFunction() { \n";
ptr += "var y = document.getElementById(\"myText1\").value \n";
ptr += "document.getElementById(\"demo1\").innerHTML = y \n";
ptr += "var z = document.getElementById(\"myText2\").value \n";
ptr += "document.getElementById(\"demo2\").innerHTML = z \n";
ptr += "var x = document.getElementById(\"mySubmit\").formTarget\n";
ptr += "document.getElementById(\"demo\").innerHTML = x \n";
ptr += "alert(\"Login success!\")}\n";
ptr += "</script>\n";
ptr += "</body>\n";
ptr += "</html>\n";
return ptr;
}

我正在文本框中输入一些数据，并将此数据存储到变量x，y，z中。但是我如何将这些数据打印到串行监视器中。谁能帮我吗？

如何从html网页将文本框数据打印到Arduino上的串行监视器？

0 个答案: