esp8266建立的网页内输入框判断输入值是否为123,点击页面内按钮后如果是就向ESP8266返回1,并存在data这个变量中
时间: 2024-03-24 17:42:04 浏览: 31
好的,针对你的问题,我们可以通过以下步骤实现:
1. 在ESP8266上建立一个网页,并在网页上添加一个输入框和一个按钮。
2. 当用户在输入框中输入值,并点击按钮时,ESP8266可以通过JavaScript获取输入框中的值,并将其与"123"进行比较。
3. 如果输入值等于"123",则可以发送一个请求给ESP8266,告知其返回值为1。
4. ESP8266可以接收到请求,并将返回值1存储在data变量中。
以下是参考代码:
在ESP8266上建立网页:
```c++
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
ESP8266WebServer server(80);
void handleRoot() {
String html = "<html><body>";
html += "<form action='/result' method='get'>";
html += "Please enter a value:<input type='text' name='input'><br>";
html += "<input type='submit' value='Submit'></form>";
html += "</body></html>";
server.send(200, "text/html", html);
}
void handleResult() {
String input = server.arg("input");
String result;
if (input == "123") {
result = "1";
} else {
result = "0";
}
server.send(200, "text/plain", result);
}
void setup() {
WiFi.begin("SSID", "password");
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
}
server.on("/", handleRoot);
server.on("/result", handleResult);
server.begin();
}
void loop() {
server.handleClient();
}
```
在网页上添加JavaScript代码:
```javascript
function sendRequest() {
var input = document.getElementsByName("input")[0].value;
if (input == "123") {
var xhr = new XMLHttpRequest();
xhr.open("GET", "/result", true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var result = xhr.responseText;
document.getElementById("output").innerHTML = result;
}
}
xhr.send();
}
}
```
在网页上添加按钮:
```html
<button onclick="sendRequest()">Submit</button>
```
注意事项:
1. 请将"SSID"和"password"替换为你的WiFi SSID和密码。
2. 请将以上代码保存为一个文件,并将其上传到ESP8266上。
3. 请在浏览器中输入ESP8266的IP地址,即可访问网页。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)