esp8266建立的网页内输入框判断输入值是否为123,点击页面内按钮后如果是就向esp8266返回1
时间: 2024-03-24 07:39:51 浏览: 52
好的,具体的实现步骤如下:
1. 在esp8266上建立一个网页,包含一个输入框和一个按钮,代码示例如下:
```html
<!DOCTYPE html>
<html>
<head>
<title>ESP8266 Web Server</title>
</head>
<body>
<form>
<label for="input">请输入123:</label>
<input type="text" id="input" name="input"><br><br>
<button type="button" onclick="checkInput()">提交</button>
</form>
<script>
function checkInput() {
var userInput = document.getElementById("input").value;
if (userInput == "123") {
var xhttp = new XMLHttpRequest();
xhttp.open("GET", "/input_correct?value=1", true);
xhttp.send();
} else {
alert("输入错误!");
}
}
</script>
</body>
</html>
```
其中,输入框的id为"input",按钮的onclick事件调用了一个名为checkInput()的JavaScript函数。
2. 在esp8266的程序中,设置网页的路由和处理函数,并在处理函数中解析请求参数:
```cpp
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
ESP8266WebServer server(80);
void handleRoot() {
server.send(200, "text/html",
"<html><body><form><label for=\"input\">请输入123:</label><input type=\"text\" id=\"input\" name=\"input\"><br><br><button type=\"button\" onclick=\"checkInput()\">提交</button></form><script>function checkInput() {var userInput = document.getElementById(\"input\").value;if (userInput == \"123\") {var xhttp = new XMLHttpRequest();xhttp.open(\"GET\", \"/input_correct?value=1\", true);xhttp.send();} else {alert(\"输入错误!\");}}</script></body></html>");
}
void handleInputCorrect() {
String value = server.arg("value");
if (value == "1") {
server.send(200, "text/plain", "1");
} else {
server.send(200, "text/plain", "0");
}
}
void setup() {
WiFi.begin("your_wifi_ssid", "your_wifi_password"); // 替换成您的WiFi名称和密码
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
}
Serial.begin(115200);
Serial.println("WiFi connected");
Serial.println("IP address: " + WiFi.localIP().toString());
server.on("/", handleRoot);
server.on("/input_correct", handleInputCorrect);
server.begin();
}
void loop() {
server.handleClient();
}
```
其中,handleRoot()函数处理网页的根路由"/",handleInputCorrect()函数处理"/input_correct"路由,当输入正确时返回"1",否则返回"0"。在setup()函数中,启动WiFi连接和Web Server。
3. 当您在网页中输入"123"后,点击提交按钮,会触发checkInput()函数。该函数会获取输入框中的值,如果为"123",则向"/input_correct"路由发送一个GET请求,并携带参数"value=1",表示输入正确。如果输入错误,则弹出一个警告框。
4. 在handleInputCorrect()函数中,解析请求参数,如果value为"1",就返回"1",表示输入正确。如果value不为"1",则返回"0",表示输入错误。
这样就可以实现您的需求了。请注意,为了使代码更加简洁易读,我将HTML、CSS和JavaScript代码都写在了ESP8266程序中,实际应用中,您可以将它们分开写在不同的文件中,然后通过Web Server提供服务。
阅读全文