ESP32—C3实现网页跳转
源码
#include <WiFi.h>
#include <WebServer.h>
// 替换为你的WiFi网络信息
const char* ssid = "123";
const char* password = "12345678901";
WebServer server(80); // 创建Web服务器，默认端口为80
// HTML页面内容
const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML><html>
<head>
<title>ESP32-C3 Web Server</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>欢迎来到主页</h1>
<a href="/page2"><button>跳转到第二个页面</button></a>
</body>
</html>
)rawliteral";
const char page2_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML><html>
<head>
<title>ESP32-C3 Page 2</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>这是第二个页面</h1>
<a href="/"><button>返回到主页</button></a>
</body>
</html>
)rawliteral";
void setup() {
Serial.begin(115200);
WiFi.begin(ssid, password);
//连接路由器成功才会跳出循环
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("WiFi connected.");
Serial.println(WiFi.localIP());
// 设置Web服务器路由
server.on("/", HTTP_GET, []() {
server.send(200, "text/html", index_html);
});
server.on("/page2", HTTP_GET, []() {
server.send(200, "text/html", page2_html);
});
// 开始Web服务器
server.begin();
}
void loop() {
server.handleClient();
}
跳转原理
1. HTML中的按钮和超链接
在HTML页面中，有两种常见的跳转方式：
- 超链接 (
<a>标签)：允许用户点击后跳转到另一个页面。 - 表单提交或JavaScript：通过JavaScript函数或表单提交来触发页面跳转。
在给出的代码中，使用了超链接来实现页面跳转：
<a href="/"><button>返回到主页</button></a>
和
<a href="/page2"><button>跳转到第二个页面</button></a>
这些<a>标签定义了跳转的目标URL（在本例中是主页"/"和第二个页面"/page2"），而<button>标签则提供了一个可点击的界面元素。
2. 用户点击按钮
当用户在浏览器中点击这些按钮时，浏览器会根据href属性中的URL发起一个新的HTTP GET请求。
3. 服务器处理请求
服务器（在本例中是ESP32-C3 Web服务器）接收到这个请求后，会根据请求的URL（例如"/"或"/page2"）来调用相应的回调函数。
4. 服务器发送响应
回调函数会通过server.send()方法发送一个HTTP响应给客户端（用户的浏览器）。这个响应包含一个状态码（通常是200表示成功）和一个包含HTML内容的消息体。
server.send(200, "text/html", index_html);
或
server.send(200, "text/html", page2_html);
5. 浏览器显示新页面
当浏览器接收到这个响应后，它会解析HTML内容并将其显示给用户。这样就完成了页面跳转。
跳转原理总结
- 用户点击HTML页面中的按钮。
- 浏览器根据按钮的
href属性向服务器发送HTTP GET请求。 - 服务器根据请求的URL调用相应的回调函数。
- 服务器发送包含新页面HTML内容的HTTP响应。
- 浏览器解析并显示新的HTML页面。
这个过程对于用户来说是无缝的，看起来就像是直接从一个页面跳转到另一个页面。实际上，背后发生了HTTP请求和响应的过程。
原文地址：https://blog.csdn.net/qq_59527512/article/details/142891286
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！