javascript - ESP8266 网络服务器
问题描述
我发现了关于堆栈溢出的有趣代码,但我唯一不喜欢它的是它使用通过 Internet 导入的 JQuery,并且我需要它在不连接到 Internet 的情况下全部工作。你能告诉我如何改变吗?
代码:
void handleRoot() {
snprintf ( htmlResponse, 3000,
"<!DOCTYPE html>\
<html lang=\"en\">\
<head>\
<meta charset=\"utf-8\">\
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\
</head>\
<body>\
<h1>Time</h1>\
<input type='text' name='date_hh' id='date_hh' size=2 autofocus> hh \
<div>\
<br><button id=\"save_button\">Save</button>\
</div>\
<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js\"></script>\
<script>\
var hh;\
$('#save_button').click(function(e){\
e.preventDefault();\
hh = $('#date_hh').val();\
$.get('/save?hh=' + hh , function(data){\
console.log(data);\
});\
});\
</script>\
</body>\
</html>");
server.send ( 200, "text/html", htmlResponse );
}
void handleSave() {
if (server.arg("hh")!= ""){
Serial.println("Hours: " + server.arg("hh"));
}
}
void setup() {
// Start serial
Serial.begin(115200);
delay(10);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
server.on ( "/", handleRoot );
server.on ("/save", handleSave);
server.begin();
}
void loop() {
server.handleClient();
}
解决方案
缩小的 jquery javascript 可以存储在 ESP 上,并在浏览器请求时由模块提供。
一种简单的方法是使用SPI Flash 文件系统来提供 HTML 以及 JQuery javascript。
index.html
这意味着在草图的data
子目录中创建一个。将原始草图中的 HTML 添加到文件中。还要将此文件中的脚本源更改为相对路径:
<script src="jquery.min.js"></script>
然后下载jquery.min.js
并将其复制到data
子目录中。
https://tttapa.github.io/ESP8266/Chap11%20-%20SPIFFS.html中的示例代码可用作其余代码的起点。其中的主要部分涉及初始化 SPIFFS 和为文件请求设置处理程序:
SPIFFS.begin();
server.onNotFound([]() {
if (!handleFileRead(server.uri()))
server.send(404, "text/plain", "404: Not Found");
});
// retain the save endpoint
server.on("/save", handleSave);
server.begin();
然后实现文件处理程序及其内容类型处理程序:
String getContentType(String filename)
{
if (filename.endsWith(".html")) return "text/html";
else if (filename.endsWith(".css")) return "text/css";
else if (filename.endsWith(".js")) return "application/javascript";
else if (filename.endsWith(".ico")) return "image/x-icon";
return "text/plain";
}
bool handleFileRead(String path) {
Serial.println("handleFileRead: " + path);
if (path.endsWith("/"))
{
path += "index.html";
}
String contentType = getContentType(path);
if (SPIFFS.exists(path))
{
File file = SPIFFS.open(path, "r");
size_t sent = server.streamFile(file, contentType);
file.close();
return true;
}
Serial.println("\tFile Not Found");
return false;
}
替代方法:删除 JQuery 依赖项
另一种方法是重写 javascript,以便不需要 JQuery。
这涉及在按钮上注册一个 onclick 处理程序(https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Event_handlers),从输入字段(https://stackoverflow.com /a/11563667/1373856)并发送 GET 请求(https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/send)
推荐阅读
- github - 为什么 vscode 会在终端拦截 git push 命令?
- flutter - 如何计算地图中具有相同值的键的数量并存储它?
- python - Python Tkinter 框架参考,用类组织
- ios - 从 Progress 对象创建 Observable
- algorithm - 找到您可以选择的最大苹果数,以确保您在时间 T 之前到达右下角的单元格
- flutter - Flutter Provider,当他的参数改变时更新 StreamProvider
- java - 如何在 Java 中简化此方法?
- python - (Windows 10 64 位)Py 到 Exe 错误 Python 3.8(Pyinstaller、cx_Freeze)
- python - Python 3 - 将 utf-8 编码的 csv 读入 pandas
- java - 使用列表中的元素执行算术运算