我正在从事一个自动化项目。我一直坚持从网页获取数据（按下按钮时的向上数值）返回到 ESP。我已成功将数据从 ESP 发送到网页。我正在开发一个用于控制 ESP 的 Web 应用程序。
我面临的问题是，当我按下按钮或按下该框中的 ENTER 命令（在网页上）时，如何接收数字框值并将其发送到我的特别是。我该如何解决这个问题？
在网上查了很多例子，还没有找到解决办法。
我使用的 HTML 文件：
<!DOCTYPE html>
<html>
<!-- Uncomment line below to use the 5 sec. refresh in the browser.. -->
<!-- <meta http-equiv="refresh" content="5" /> -->
<head>
<!-- Tabblad Title in the browser -->
<title>Web Page SEND and RECEIVE Test - © 2023</title>
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charset="utf-8" />
<!-- <link rel="stylesheet" type="text/css" href="styles.css" > -->
<!-- <script type="text/javascript" src="functions.js"></script> -->
<!-- Start of HTML Styles used -->
<style>
/* Default HTML Styles used */
html {
font-family: Helvetica, Arial, Sans-serif;
display: inline-block;
margin: 0px auto;
text-align: center;
}
/* Styles used in the Body*/
body {
min-width: 1000px;
width: 1000px;
height: 800;
}
#btnOneDirect {
background-color: #42d1f5;
border: none;
color: white;
padding: 8px 8px;
border-radius: 9px;
text-decoration: none;
font-size: 20px;
margin: 2px;
cursor: pointer;
width: 110px;
height: 43px;
}
#btnTwoDirect {
background-color: #f542a4;
border: none;
color: white;
padding: 8px 8px;
border-radius: 9px;
text-decoration: none;
font-size: 20px;
margin: 2px;
cursor: pointer;
width: 110px;
height: 43px;
}
/* End of HTML Styles used */
</style>
</head>
<body>
<header>
<!-- Display the Header of the Web Page -->
<h2>
<span>Wemos-D1 mini PRO - Web Page SEND and RECEIVE Test</span>
</h2>
<h4>
<span>Connected by WiFi - </span>
<span id="cnct-info"></span>
</h4>
</header>
<!-- The HTML Main (Page) -->
<div>
<div style="vertical-align: top; overflow: hidden">
<a href="#"><button class="btnOneDirect" id="btnOneDirect" onclick="directOneBtnOnClick()">DIRECT-1</button></a>
</div>
<br><br>
<div style="vertical-align: center; overflow: hidden">
<label style="font-size: 20px; font-weight: 700; color: #000000">Manual</label>
<input type="number" class="GenOneUDMan" id="GenOneUDMan" onchange="genoneudmanOnChange()"
name="GenOneUDMan" min="0" max="12000000" step="100" value="1000000"
style="width: 200px; font-size: 20px; font-weight: 700; color: #1100ff" />
</div>
<br><br>
<div style="vertical-align: top; overflow: hidden">
<a href="#"><button class="btnTwoDirect" id="btnTwoDirect" onclick="directTwoBtnOnClick()">DIRECT-2</button></a>
</div>
<br><br>
<div style="vertical-align: center; overflow: hidden">
<label style="font-size: 20px; font-weight: 700; color: #000000">Manual</label>
<input type="number" class="GenTwoUDMan" id="GenTwoUDMan" onchange="gentwoudmanOnChange()"
name="GenTwoUDMan" min="0" max="12000000" step="100" value="2000000"
style="width: 200px; font-size: 20px; font-weight: 700; color: #1100ff" />
</div>
</div>
<footer>
<!-- Display the Footer of the Web Page -->
</footer>
<script>
// Header JavaScript Functions
// *******************************************
// Send data from ESP8266 to use on WebPage,
// and Receive data from WebPage to use on ESP8266
// *******************************************
// Handle HTML-Form Functions
console.log("Javascript is running !!");
// Display Reception from ESP8266 - Header Connection Info
setInterval(function () {
var xhttp0 = new XMLHttpRequest();
xhttp0.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("cnct-info").innerHTML = this.responseText;
}
};
xhttp0.open("GET", "/cnct-info", true);
xhttp0.send();
}, 5000); // Every 5 secs.
// // *******************************************
// // Send data from WebPage to use on ESP8266
// // *******************************************
function directOneBtnOnClick() {
console.log("directOneBtnOnClick has been Clicked !!");
var waarde = document.getElementById("GenOneUDMan").value;
console.log("waarde=" + waarde);
var xhttp1 = new XMLHttpRequest();
xhttp1.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("btnOneDirect").innerHTML = this.responseText;
}
};
xhttp1.open("GET", "/btnOneDirect", true);
xhttp1.send();
}
function directTwoBtnOnClick() {
console.log("directTwoBtnOnClick has been Clicked !!");
var waarde = document.getElementById("GenTwoUDMan").value;
console.log("waarde=" + waarde);
var xhttp2 = new XMLHttpRequest();
xhttp2.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("btnTwoDirect").innerHTML = this.responseText;
}
};
xhttp2.open("GET", "/btnTwoDirect", true);
xhttp2.send();
}
function genoneudmanOnChange() {
// (event.keyCode === 13) <ENTER> wordt ook als onchange gedetecteerd
var Gen_OneUD_Man = parseInt(document.getElementById("GenOneUDMan").value);
document.getElementById("GenOneUDMan").value = Gen_OneUD_Man;
console.log("genoneudmanOnChange has been Changed to : " + Gen_OneUD_Man + " !!");
}
function gentwoudmanOnChange() {
// (event.keyCode === 13) <ENTER> wordt ook als onchange gedetecteerd
var Gen_TwoUD_Man = parseInt(document.getElementById("GenTwoUDMan").value);
document.getElementById("GenTwoUDMan").value = Gen_TwoUD_Man;
console.log("gentwoudmanOnChange has been Changed to : " + Gen_TwoUD_Man + " !!");
}
</script>
</body>
</html>
我用过的ESP8266文件：
// New Wemos_D1_Mini_Web_Test Project
// LastVers. - 02-03-2023 Wemos_D1_Mini_Web_Test, Start
// Used Typedef's
// uint8 = 1 Byte = (unsigned) char / byte (0 .. 255)
// uint16 = 2 Byte = (unsigned) short / word (0 .. 65.535)
// uint32 = 4 Byte = (unsigned) int / long (0 .. 4.294.967.295)
// sint8 or int8 = 1 Byte = (signed) char / byte (-128 .. 127)
// sint16 = 2 Byte = (signed) short / word (-32.768 .. +32.767)
// sint32 or int32 = 4 Byte = (signed) int / long (-2.147.483.648 .. +2.147.483.647)
// real32 = 4 Byte = float (-3,4028235e38 .. +3,4028235e38) (Always Signed, Precision 6 decimal places)
// real64 = 8 Byte = double (-1,7e308 .. +1,7e308) (Always Signed, Precision 15 decimal places)
#include <Arduino.h> // If there is NO Problem !!! IGNORE !!!
String VersionInfo = " 02-03-2023.R01 ";
#define Baud_USB 115200
/* tbv WiFi - overgenomen van Wemos_D1_Mini_CC_CP_CR_BattCap Tool */
#include <ESP8266WiFi.h>
#include <WiFiUdp.h>
#include <ESP8266WebServer.h> // tbv WiFiManager
#include <DNSServer.h> // tbv WiFiManager
#include <WiFiManager.h> // tbv WiFiManager
ESP8266WebServer server(80); // 80 is the port number (New)
// Website Display Labels - Actual NTP time & date & SummerWinter Time & ConnectInfo , ALL updated in TimeKeeping()
String connectInfo = ""; // tbv WebPage weergave SSID & RSSI info
String WebLblConnect = "";
/***** OnDevice Flash System *****/
#include <FS.h>
// What Filesystem to use ??
#define FS_SPIFFS
#ifdef FS_SPIFFS
// Using SPIFFS
// no extra includes needed
#else
// NOT Using SPIFFS, but littleFS
#include <LittleFS.h>
#endif
/***** tbv Reset function at address 0 (from within the Application) *****/
void(* resetFunc) (void) = 0; // Declare Reset function at address 0
/*****************************************/
/***** DEBUG_PRINT FILE_SYSTEM MACRO *****/
/*****************************************/
// ? Uncomment to enable printing out nice debug messages.
// ? #define FILE_SYST_DEBUG
// #define FILE_SYST_DEBUG
// Define where debug output will be printed.
#define FILE_SYST_PRINTER Serial
// Setup DEBUG printing MACRO
#ifdef FILE_SYST_DEBUG
#define FS_DEBUG_PRINT(...) { FILE_SYST_PRINTER.print(__VA_ARGS__); }
#define FS_DEBUG_PRINTLN(...) { FILE_SYST_PRINTER.println(__VA_ARGS__); }
#else
#define FS_DEBUG_PRINT(...) {}
#define FS_DEBUG_PRINTLN(...) {}
#endif
/*******************************************************/
/***** SETUP Instellingen - Print Config to Serial *****/
/*******************************************************/
bool printStartup = true;
/**********************************************************/
/***** tbv WebServer - Sending DATA to the WEBPAGE !! *****/
/**********************************************************/
void UpdateCnctInfoLabels() {
server.send(200, "text/plain", WebLblConnect);
yield();
}
// Display the WebPage from the SPIFFS memory
void ServeWebMainFile() {
#ifdef FS_SPIFFS
File file = SPIFFS.open("/index.html", "r");
#else
File file = LittleFS.open("/index.html", "r");
#endif
server.streamFile(file, "text/html");
file.close();
}
/************************************************************/
/***** tbv WebServer - Receive DATA from the WebPage !! *****/
/************************************************************/
// Receive data from WebPage
void PerformWeb_ButtonOnePress() {
//
String act_state = server.arg("btnOneDirect");
// String act_state = server.arg("/GenFreqUDMan");
Serial.println("PerformWeb_ButtonOnePress function has been called !!");
Serial.println("server.arg = " + act_state);
yield();
}
void PerformWeb_ButtonTwoPress() {
//
String act_state = server.arg("btnTwoDirect");
// String act_state = server.arg("/GenFreqUDMan");
Serial.println("PerformWeb_ButtonTwoPress function has been called !!");
Serial.println("server.arg = " + act_state);
yield();
}
/*******************************************************************/
/***** Print Contents of FlashDrive tbv LittleFS And/Or SPIFFS *****/
/*******************************************************************/
void listDir(const char * dirname) {
#ifdef FILE_SYST_DEBUG
char Fs_Buf[50];
#ifdef FS_SPIFFS
sprintf(Fs_Buf, "\nSPIFFS FileSystem:\nListing directory: %s", dirname);
FS_DEBUG_PRINTLN(Fs_Buf);
Dir root = SPIFFS.openDir(dirname);
#else
sprintf(Fs_Buf, "\nLittleFS FileSystem:\nListing directory: %s", dirname);
FS_DEBUG_PRINTLN(Fs_Buf);
Dir root = LittleFS.openDir(dirname);
#endif
while (root.next()) {
File file = root.openFile("r");
FS_DEBUG_PRINT(" FILE: ");
FS_DEBUG_PRINT(root.fileName());
FS_DEBUG_PRINT(" SIZE: ");
FS_DEBUG_PRINT(file.size());
time_t cr = file.getCreationTime();
time_t lw = file.getLastWrite();
file.close();
struct tm * tmstruct = localtime(&cr);
sprintf(Fs_Buf, "\n \tCREATION: %d-%02d-%02d %02d:%02d:%02d", (tmstruct->tm_year) + 1900, (tmstruct->tm_mon) + 1, tmstruct->tm_mday, tmstruct->tm_hour, tmstruct->tm_min, tmstruct->tm_sec);
FS_DEBUG_PRINT(Fs_Buf);
tmstruct = localtime(&lw);
sprintf(Fs_Buf, "\n \tLAST WRITE: %d-%02d-%02d %02d:%02d:%02d\n", (tmstruct->tm_year) + 1900, (tmstruct->tm_mon) + 1, tmstruct->tm_mday, tmstruct->tm_hour, tmstruct->tm_min, tmstruct->tm_sec);
FS_DEBUG_PRINT(Fs_Buf);
}
#endif
}
/**************************************************/
/***** Reset Function for the Wemos-D1 Device *****/
/**************************************************/
void PerformWeb_WiFiReInitialize() {
server.stop();
WiFiManager wifiManager; // ReInitialize wifiManager Object to be able to Reset WiFi Settings
wifiManager.resetSettings(); // Reset the curent WiFi Settings
resetFunc(); // Call the Reset Function
}
void PerformWeb_DeviceRestart() {
server.stop();
resetFunc(); // Call the Reset Function
}
/*************************************/
/***** SETUP the Wemos-D1 Device *****/
/*************************************/
void setup()
{
/**************************************************/
/***** USB-Serial Port - Wemos-D1 Board Setup *****/
/**************************************************/
Serial.begin(Baud_USB);
while (!Serial) {
; // Wait for serial port (USB) to connect.
}
Serial.println();
/*******************************************************************************/
/***** WiFiManager - mna_AP_FreqGenCnt_Manager Setup *****/
/*******************************************************************************/
// WiFiManager Initialisation
WiFiManager wifiManager;
// WiFiManager setDebugInfo (true or false)
wifiManager.setDebugOutput(false);
// Set TimeOut until the Configuration Portal gets turned OFF (in Sec.)
wifiManager.setTimeout(120UL);
// Sets the minimum Signal Quality, will NOT show sign ON networks below the set value,
// default is set to 8% (so uou will see a lot of networks !!!)
wifiManager.setMinimumSignalQuality(30); // Min. RSSI Quality = 30%
// Disable sleep, can improve Access Point stability
WiFi.setSleepMode(WIFI_NONE_SLEEP);
if (!wifiManager.autoConnect("mna_AP_FreqGenCnt_Manager", "")) {
if (printStartup == true) {
Serial.println("Failed to connect and hit TimeOut");
delay(3000);
// Reset and Try again
// the complete Program will be Restarted Now...(as if it was Powered UP again)
ESP.reset();
delay(5000);
}
}
/******************************************************************************/
/***** WiFi does Exist NOW !!, Display WiFi Application & Connection Info *****/
/******************************************************************************/
// Start the FileSystem on (the Internal) Flash
#ifdef FS_SPIFFS
if (!SPIFFS.begin()) {
#ifdef FILE_SYST_DEBUG
FS_DEBUG_PRINTLN("\nSPIFFS mount failed");
#endif
return;
} else {
#ifdef FILE_SYST_DEBUG
FS_DEBUG_PRINTLN("\nSPIFFS mount Succeeded");
#endif
}
#else
if (!LittleFS.begin()) {
#ifdef FILE_SYST_DEBUG
FS_DEBUG_PRINTLN("\nLittleFS mount failed");
#endif
return;
} else {
#ifdef FILE_SYST_DEBUG
FS_DEBUG_PRINTLN("\nLittleFS mount Succeeded");
#endif
}
#endif
listDir("/");
Serial.flush();
/************************************************/
/***** WebPages (or functions) of the WebServer */
/************************************************/
server.on("/", ServeWebMainFile); // Main WebPage Screen function
server.on("/btnOneDirect", PerformWeb_ButtonOnePress); // Perform Action on pressing DIRECT-1 button on Webpage
server.on("/btnTwoDirect", PerformWeb_ButtonTwoPress); // Perform Action on pressing DIRECT-2 button on Webpage
server.on("/cnct-info",UpdateCnctInfoLabels); // Connection Info label in the Header
// Now Start of the (Device local) WebServer
server.begin();
/**********************************************/
/***** Start showing the Application Info *****/
/**********************************************/
if (printStartup == true) {
Serial.println();
Serial.println();
Serial.println("***** mna_AP_Web_Test_Manager - Board Startup Message *****");
Serial.print("Connected to : ");
Serial.println(WiFi.SSID());
Serial.print("IP gateway : ");
Serial.println(WiFi.gatewayIP());
Serial.print("IP subnet : ");
Serial.println(WiFi.subnetMask());
Serial.print("IP address : ");
Serial.println(WiFi.localIP());
Serial.println("HTTP server : Started");
Serial.println("--------------------------------------------------------------------");
Serial.flush();
}
}
void loop()
{
/***************************************************/
/***** WebSite handling on the Wemos-D1 Device *****/
/***************************************************/
server.handleClient();
yield();
// Update WebLblConnect information..
WebLblConnect = "SSID : " + WiFi.SSID() + " - LocalIP : " + WiFi.localIP().toString() + " - RSSI : " + (String)WiFi.RSSI() + " dBm";
}
嗨，我经验不是很丰富，但我一直在从事一个项目，使用网页来设置时间和温度，以控制动物园的温度，我正在使用 MQTT，也许可以尝试将其视为一个选项，希望这有帮助