ESP32-Web-Server编程- 通过文本框向 Web 提交数据

ESP32-Web-Server编程- 通过文本框向 Web 提交数据

概述

前述章节我们通过简单 HTML、AJAX、Websocket、SSE 在网页上显示数据,通过网页上的按钮控制 ESP32 的行为。从本节开始,我们将进一步了解通过网页与 ESP32 进行交互的方法。

实现更复杂的交互功能,从通过网页向 ESP32 发送字符串、数字开始。ESP32 在接收到这些字符串时可以识别其含义,实现对 ESP32 的灵活的控制。这就是物联网的简单的项目原型了。

需求及功能解析

本节演示如何在 ESP32 上部署一个 Web 服务器,并在访问该 web 服务器时在网页端提供一个字符串输入框、数字输入框。可以在网页输入对应的字符、数字到 ESP32 的 Web 服务器。

示例解析

目录结构

├── CMakeLists.txt
├── main
│   ├── CMakeLists.txt
│   └── main.c                 User application
├── components
│   └── fs_image
└── README.md                  This is the file you are currently reading
  • 目录结构主要包含主目录 main,以及组件目录 components.
  • 其中组件目录components中包含了用于存储网页文件的 fs_image 目录(即前述前端文件)。

前端代码

前端代码的 HTML 部分在 components/fs_image/web_image/index.html 中,创建了两个 input 输入框,类型分别是 Text FieldText Field,它们分别用于输入字符串、数字。

 <div class="card">
<form action="/" method="POST"><p class="card-title">Text Field</p><p><label for="input1">Input 1</label><input type="text" id ="input1" name="input1"><input type ="submit" value ="Submit"></p>
</form>
</div>
<div class="card">
<form action="/" method="POST"><p class="card-title">Number Field</p><p><label for="input2">Input 2</label><input type="number" id ="input2" name="input2"><input type ="submit" value ="Submit"></p>
</form>

此外,在网页上还增加了实时显示当前值的两个显示文本,分别显示当前 ESP32 上字符串、数字的值:

<div class="card"><p class="card-title">Text Value</p><p class="value">Current value: <span id="textFieldValue"></span></p>
</div>
<div class="card"><p class="card-title">Number Value</p><p class="value">Current value: <span id="numberFieldValue"></span></p>
</div>

它们通过 components/fs_image/web_image/js/script.js 中的 getValues() 来获得更新:

// Function to get current readings on the webpage when it loads/refreshes
function getValues(){var xhr = new XMLHttpRequest();xhr.onreadystatechange = function() {if (this.readyState == 4 && this.status == 200) {var myObj = JSON.parse(this.responseText);console.log(myObj);document.getElementById("textFieldValue").innerHTML = myObj.textValue;document.getElementById("numberFieldValue").innerHTML = myObj.numberValue;}}; xhr.open("GET", "/values", true);xhr.send();
}

后端代码

后端代码主要是增加了浏览器通过网页向服务器推送数据时的处理函数update_values_post_handler():

 {"/", HTTP_POST, update_values_post_handler, rest_context},

在该函数中,接收推动数据,并解析推送数据中的字符串和数字:

/* Simple handler for uart_info_post handler */
static esp_err_t update_values_post_handler(httpd_req_t* req)
{ESP_LOGD(TAG, "in / post handler");char filepath[FILE_PATH_MAX];rest_server_context_t* rest_context = (rest_server_context_t*) req->user_ctx;char* buf = ((rest_server_context_t*) (req->user_ctx))->scratch;int str_len = 0;char temp_str[128] = {0};if (recv_post_data(req, buf) != ESP_OK) {// modbus_dtu_web_response_error(req, HTTPD_500);ESP_LOGE(TAG, "recv post data error");return ESP_FAIL;}str_len = httpd_find_arg(buf, my_para1, temp_str, sizeof(temp_str));if ((str_len != -1) && (strlen((char *)temp_str) != 0)) {memcpy(my_str, temp_str, strlen(temp_str)+1);ESP_LOGI(TAG, "updates:str=%s", my_str);}memset(temp_str, '\0', sizeof(temp_str));str_len = httpd_find_arg(buf, my_para2, temp_str, sizeof(temp_str));if ((str_len != -1) && (strlen((char *)temp_str) != 0)) {my_num = atoi(temp_str);ESP_LOGI(TAG, "updates:num=%d", my_num);}// return index html filestrlcpy(filepath, rest_context->base_path, sizeof(filepath));strlcat(filepath, "/index.html", sizeof(filepath));if(custom_send_file_chunk(req, filepath) != ESP_OK) {ESP_LOGE(TAG, "rest common send err");return ESP_FAIL;}return ESP_OK;
}

注意,每次更新值,我们都重新返回整个 html 文件,以便于可以触发components/fs_image/web_image/js/script.js 中的 getValues() ,在网页上更新当前下发数据的值。

示例效果

在这里插入图片描述

讨论

1)这是我们首次使用 HTTP 的 POST 方法,可以参考 A 回顾 HTTP 的基本方法。我们将在后续的章节掌握更多有趣且使用的开发技能。

总结

1)本节主要是介绍在 ESP32 Web 上部署带输入文本框的网页,通过网页向 ESP32 发送字符串和数字。通过这种机制,我们可以实现对 ESP32 简单的数据通信。

资源链接

1)ESP32-Web-Server ESP-IDF系列博客介绍
2)对应示例的 code 链接 (点击直达代码仓库)

3)下一篇:ESP32-Web-Server编程- 通过滑动条向 Web 提交数据

(码字不易感谢点赞或收藏)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/235447.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Trie字典树

文章目录 什么是 T r i e Trie Trie 树一般条件 AcWing 835. Trie字符串统计CODE解释一下 i n s e r t ( ) insert() insert() 函数 i d x idx idx 的意义 AcWing 143. 最大异或对异或思路解析CODE代码解析 给点思考 什么是 T r i e Trie Trie 树 一种树结构&#xff0c;用…

NX二次开发UF_MTX2_vec_multiply_t 函数介绍

文章作者&#xff1a;里海 来源网站&#xff1a;https://blog.csdn.net/WangPaiFeiXingYuan UF_MTX2_vec_multiply_t Defined in: uf_mtx.h void UF_MTX2_vec_multiply_t(const double vec [ 2 ] , const double mtx [ 4 ] , double vec_product [ 2 ] ) overview 概述 Ret…

《开箱元宇宙》:Madballs 解锁炫酷新境界,人物化身系列大卖

你是否曾想过&#xff0c;元宇宙是如何融入世界上最具代表性的品牌和名人的战略中的&#xff1f;在本期的《开箱元宇宙》 系列中&#xff0c;我们与 Madballs 的战略顾问 Derek Roberto 一起聊聊 Madballs 如何在 90 分钟内售罄 2,000 个人物化身系列&#xff0c;以及是什么原…

软考:2024年软考高级:软件工程

软考&#xff1a;2024年软考高级: 提示&#xff1a;系列被面试官问的问题&#xff0c;我自己当时不会&#xff0c;所以下来自己复盘一下&#xff0c;认真学习和总结&#xff0c;以应对未来更多的可能性 关于互联网大厂的笔试面试&#xff0c;都是需要细心准备的 &#xff08;1…

进程间的信号

1. 进程信号 1.1 进程信号的概念 信号是一个软件中断&#xff0c;通知进程某个事件发生了异步事件&#xff0c;打断进程当前的操作&#xff0c;去处理这个事件&#xff0c;信号是多种多样的&#xff0c;并且一个信号对应一个事件&#xff0c;这样才能做到进程收到一个信号后&…

解决:ValueError: the first two maketrans arguments must have equal length

解决&#xff1a;ValueError: the first two maketrans arguments must have equal length 文章目录 解决&#xff1a;ValueError: the first two maketrans arguments must have equal length背景报错问题报错翻译报错位置代码报错原因解决方法今天的分享就到此结束了 背景 在…

Java | The last packet sent successfully to the server was xxx milliseconds ago

最近在部署代码后&#xff0c;后端总是会遇到这个问题&#xff0c;设备通道在访问数据库时经常会报错&#xff0c;在搜集大量资料后我以为是配置问题&#xff0c;首先要保证&#xff1a; &#xff08;1&#xff09;首先确定jdbc.url地址是正确的 &#xff08;2&#xf…

【C++】类和对象——const修饰成员函数和取地址操作符重载

在上篇博客中&#xff0c;我们已经对于日期类有了较为全面的实现&#xff0c;但是&#xff0c;还有一个问题&#xff0c;比如说&#xff0c;我给一个const修饰的日期类的对象 这个对象是不能调用我们上篇博客写的函数的&#xff0c;因为&d1是const Date*类型的&#xff…

操作系统--中断异常

操作系统第一章易错总结 1.操作系统的功能 ⭐ 编译器是操作系统的上层软件&#xff0c;不是操作系统需要提供的功能。 ⭐注意&#xff1a; 1.批处理的主要缺点是缺乏交互性 2.输入/输出指令需要中断操作&#xff0c;中断必须在核心态下执行 3.多道性是为了提高系统利用率和…

【模电】放大电路的性能指标

放大电路的性能指标 放大倍数输入电阻输出电阻通频带非线性失真系数最大不失真输出电压最大输出功率与效率 下图所示为放大电路的示意图。 对于信号而言&#xff0c;任何一个放大电路均可看成一个两端口网络。左边为输入端口&#xff0c;当内阻为 R s R\tiny s Rs的正弦波信号…

Java多线程-第20章

Java多线程-第20章 1.创建线程 Java是一种支持多线程编程的编程语言。多线程是指在同一程序中同时执行多个独立任务的能力。在Java中&#xff0c;线程是一种轻量级的子进程&#xff0c;它是程序中的最小执行单元。Java的多线程编程可以通过两种方式实现&#xff1a;继承Threa…

项目五 配置与管理磁盘

项目五 配置与管理磁盘 磁盘配额&#xff08;Quota&#xff09;&#xff0c;磁盘阵列&#xff08;RAID&#xff09;&#xff0c;逻辑滚动文件系统&#xff08;LVM&#xff09; #职业能力目标和要求 1&#xff0c;掌握Linux下的磁盘管理工具的使用方法 2&#xff0c;掌握Linux…