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>
)";
- 本文由用户 老张 发布，文中观点仅代表作者本人，不代表本站立场。
- 如需转载，请联系作者；如有侵权，请联系本站处理。
- 如需转载，请联系作者；如有侵权，请联系本站处理。
微信分享
评论涨知识
LED点阵屏
LED点阵屏通过LED（发光二极管）组成，以灯珠亮灭来显示文字、图片、动画、视频等，是各部分组件都模块化的显示器件，通常由显示模块、控制系统及电源系统组成。
评论:
相关文章
【ESP32 C++教程】Unit4-2 模拟量传感器
本小节讲解模拟量传感器使用，旋转电位器，DHT11温湿度传感器和实现自定义传感器类。
【ESP32 C++教程】Unit4-1 数字量传感器
本小节讲解Sensor类及派生类、数字量传感器使用和传感器的推荐交互流程。
【ESP32 C++教程】Unit3-2 触摸输入
本小节讲解ESP32内置触摸引脚的用法，
【ESP32 C++教程】Unit3-1 按键输入
本小节主要介绍按键信号转换、Button类及派生类、和Button交互推荐流程。
【ESP32 C++教程】Unit2-2 Ws2812灯珠
本小节主要介绍Ws2812灯珠的使用、对父类进行扩展实现自定义功能，和指针向下强制转换的使用。
【ESP32 C++教程】Unit2-1 RGB三色LED
本小节主要介绍RGB三色LED的使用，以及多态的具体实现。
【ESP32 C++教程】Unit1-3 ESP32 Arduino 开发框架
ESP32 Arduino Framework是专门针对ESP32开发板的Arduino应用开发框架，为用户开发IOT应用、HMI应用提供一致的开发体验。
ESPConnect：基于浏览器的ESP32管理器
ESPConnect是一个基于现代浏览器的管理器，在你需要快速验证、调试、管理文件、检查状态的时候，它能帮你省下大量打开和切换重型工具的时间。
用ESP32做一个FM收音机
本文介绍两种使用TEA5767收音机模块实现FM收音机的方案，感兴趣的朋友可在此基础上实现更丰富的功能。
GPIOViewer：让ESP32引脚状态一览无余！
GPIOViewer 是一个强大的 Arduino 库，专门为 ESP32 芯片设计，可以实时监控 ESP32 芯片上的所有 GPIO 引脚状态。它可以帮助你快速直观地了解每个引脚的当前状态，例如高电平、低电平、输入、输出、中断等等。
微信分享
