ESP32 WebServer库处理表单请求
本文主要讲解WebServer库如何来处理表单请求。
WebServer库是一个可运行在ESP32上的轻量级WEB服务组件，通过它可实现用网页来做设备控制和文件上传等功能。
本文主要讲解WebServer库如何来处理表单请求。
通过webserver.arg(param)即可获取到值，示例代码如下：
不过webserver无法直接处理JSON数据，需要在绑定路径时额外再指定一个上传函数来接收数据，
原型如下：
on(Uri& uri, HttpMethod method, THandlerFunction fn, THandlerFunction ufn)
ufn指向的函数用来处理上传数据，原型也是 void(void)
示例代码如下：
本文主要讲解WebServer库如何来处理表单请求。
1. 基础的Web服务启动
WebServer库的使用比较简单，代码如下：// 1.创建服务对象
WebServer webserver(80);
void setup() {
WiFi.connect("ssid", "password");
// 2.绑定路径处理函数
// 函数原型为 void(void)，即无参数、无返回值的函数
webserver.on("/", [](){
webserver.send(200, "text/html", "It's work!");
});
// 3.启动服务
webserver.begin();
)
void loop() {
// 4.响应请求
webserver.handleClient();
delay(1);
}2. 处理普通表单请求
普通表单一般以x-www-form-urlencoded的格式提交数据，形如：param1=value1¶m2=param2&...通过webserver.arg(param)即可获取到值，示例代码如下：
webserver.on("/form1", []() {
webserver.send(200, "text/html", form1_html);
});
webserver.on("/form1_submit", []() {
String ssid = webserver.arg("ssid");
String password = webserver.arg("password");
// 后续处理...
webserver.send(200, "application/json", "{\"success\":\"true\"}");
});static const char *form1_html PROGMEM = R"(
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' href='/mini.css'>
<script src='/zepto.js'></script>
<title>Form1</title>
</head>
<body>
<h2>Form1</h2>
<p></p>
<form id='form1' method='post'>
<fieldset>
<legend>WiFi配置</legend>
<div class='row responsive-label'>
<div class='col-sm-12 col-md-3'><label for='ssid'>WiFi名称：</label></div>
<div class='col-sm-12 col-md'><input type='text' style='width:90%' name='ssid'></div>
</div>
<div class='row responsive-label'>
<div class='col-sm-12 col-md-3'><label for='password'>WiFi密码：</label></div>
<div class='col-sm-12 col-md'><input type='text' style='width:90%' name='password'></div>
</div>
</fieldset>
<input type='submit' class='primary' value=' 提交 '>
</form>
</body>
<script type='text/javascript'>
$('#form1').on('submit', function(e) {
e.preventDefault();
var formData = $(this).serialize();
$.ajax({
type: 'POST',
url: '/form1_submit',
data: formData,
success: function(response) {
if (response.success) {
alert('ok');
} else {
alert(response.error);
}
},
error: function(xhr, status, error) {
console.error('An error occurred:', error);
}
});
});
</script>
</html>
)";3. 提交JSON数据
通过对表单数据进行组装，我们可以向服务端提交JSON格式数据，以满足一些服务端只处理JSON数据的情形，不过webserver无法直接处理JSON数据，需要在绑定路径时额外再指定一个上传函数来接收数据，
原型如下：
on(Uri& uri, HttpMethod method, THandlerFunction fn, THandlerFunction ufn)
ufn指向的函数用来处理上传数据，原型也是 void(void)
示例代码如下：
webserver.on("/form2", []() {
webserver.send(200, "text/html", form2_html);
});
std::string payload;
webserver.on("/form2_submit", []() {
// 这里使用ESP32内置的cJSON库来解析，也可以用其他第三方库来处理，如ArduinoJson库等 。
cJSON *json = cJSON_Parse(payload.c_str());
std::string ssid = cJSON_GetObjectItem(json, "ssid")->valuestring;
std::string password = cJSON_GetObjectItem(json, "password")->valuestring;
// 后续处理...
webserver.send(200, "application/json", "{\"success\":\"true\"}");
}, []() {
// 通过访问raw来获取上传数据，如果数据量较大（如上传文件），则RAW_WRITE会多次调用
HTTPRaw &raw = webserver.raw();
if (raw.status == RAW_START) {
payload = "";
} else if (raw.status == RAW_WRITE) {
payload = std::string(reinterpret_cast<char*>(raw.buf), raw.currentSize);
} else if (raw.status == RAW_END) {
}
);static const char *form2_html PROGMEM = R"(
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' href='/mini.css'>
<script src='/zepto.js'></script>
<title>Form2</title>
</head>
<body>
<h2>Form2</h2>
<p></p>
<form id='form2' method='post'>
<fieldset>
<legend>WiFi配置</legend>
<div class='row responsive-label'>
<div class='col-sm-12 col-md-3'><label for='ssid'>WiFi名称：</label></div>
<div class='col-sm-12 col-md'><input type='text' id='ssid' style='width:90%' name='ssid'></div>
</div>
<div class='row responsive-label'>
<div class='col-sm-12 col-md-3'><label for='password'>WiFi密码：</label></div>
<div class='col-sm-12 col-md'><input type='text' id='password' style='width:90%' name='password'></div>
</div>
</fieldset>
<input type='submit' class='primary' value=' 提交 '>
</form>
</body>
<script type='text/javascript'>
$('#form2').on('submit', function(e) {
e.preventDefault();
var ssidVal = $('#ssid').val();
var passwordVal = $('#password').val();
var payload = {
ssid: ssidVal,
password: passwordVal
};
$.ajax({
type: 'POST',
url: '/form2_submit',
data: JSON.stringify(payload),
contentType: 'application/json',
success: function(response) {
if (response.success) {
alert('ok');
} else {
alert(response.error);
}
},
error: function(xhr, status, error) {
console.error('An error occurred:', error);
}
});
});
</script>
</html>
)";
- 本文由用户 老张 发布，文中观点仅代表作者本人，不代表本站立场。
- 如需转载，请联系作者；如有侵权，请联系本站处理。
- 如需转载，请联系作者；如有侵权，请联系本站处理。
微信分享
评论涨知识
I2S
I2S(Inter—IC Sound)总线, 又称集成电路内置音频总线，是飞利浦公司为数字音频设备之间的音频数据传输而制定的一种总线标准。
评论:
相关文章
在esp32上运行WebServer
WebServer是非常常用的一个功能，在设备上使用该功能可以直接通过浏览器访问和操作设备。
Arduino-ESP32与ESP-IDF的版本对应表
Arduino-ESP32与ESP-IDF的版本对应表。
Arduino-ESP32文件系统全解析：SPIFFS、LittleFS、SD卡操作
Arduino-ESP32提供了多种文件系统解决方案，本文将深入解析SPIFFS、LittleFS和SD卡三种主流存储方案，帮助你做出最佳选择。
ESP32-P4-WIFI6开发板
ESP32-P4-WIFI6-DEV-KIT是一款微雪(Waveshare)设计的基于 ESP32-P4 的多媒体开发板，并集成 ESP32-C6，支持 Wi-Fi 6 和 BLE 5 无线连接。它提供丰富的人机交互接口，包括 MIPI-CSI (集成图像信号处理器 ISP)、MIPI-DSI、SPI、I2S、I2C、LED PWM、MCPWM、RMT、ADC、UART 和 TWAI 等。
ESP-Hosted 入门介绍 &使用指南
ESP-Hosted 解决方案提供了将 ESP 板用作 Wi-Fi 和 Bluetooth/BLE 连接的通信处理器的方法。
设备上云太麻烦？ESP-Hosted一站触达！
ESP-Hosted 提供了一种将ESP芯片和模组用作通信协处理器的解决方案，该解决方案为主机微处理器或微控制器提供无线连接，使主机能够与其他设备通信。简单来说为网卡方案。
ESP32 + Arduino使用TFT_eSPI库
Arduino+ESP32上使用TFT_eSPI库快速点亮这个屏幕，驱动芯片ST7789
ESP32 利用 SPI 连通 TFT 彩屏
本文给出了一个ESP32与SPI 接口TFT显示屏接线的详细说明，供大家参考。
在Micropython下使用ESPNow功能进行数据传输
本文讲解如何在Micropython环境下使用ESP32的ESPNow功能进行数据传输。
微信分享
