在HTML内部刷新div，没有任何PHP
Refreshing div inside HTML without any PHP?
下午好！
我的项目背后的想法是将手工记录发送到网页，以便我不必仅依靠串行监视器。
我将字符串从ESP32发送到由同一ESP32托管的网页。为此，我使用的是ESPASYNCWEBSERVER库，我们可以在HTML内使用placeholders。ESP然后使用：
String processor(const String& var)
和
server.on("/logs", HTTP_GET, [](AsyncWebServerRequest* request){
request->send(SPIFFS, "/events.html", "text/html", false, processor);
});
用我想要的任何数据代替它发现的占位符。
我正在使用圆形缓冲区，以免最终使用所有内存。
我用Google搜索了如何在HTML内部刷新一个Div，到处查找的地方是.load('file.php')。我的项目没有任何.php文件。
问题是我要加载什么而不是该php文件？
加载相同的.html页面不起作用。
events.html
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel = "stylesheet" type = "text/css" href = "master.css">
<title>Events Log</title>
<script type="text/javascript" src="jquery-1.9.0.min.js"></script>
<script>
$(document).ready( function(){
$('#big-box').load('events.html');
refresh();
});
function refresh()
{
setTimeout( function() {
$('#big-box').fadeOut('slow').load('events.html').fadeIn('slow');
refresh();
}, 2000);
}
</script>
</head>
<body>
<div id="big-box">
<div class="textbox">%PLACEHOLDER_1%</div>
<div class="textbox">%PLACEHOLDER_2%</div>
<div class="textbox">%PLACEHOLDER_3%</div>
<div class="textbox">%PLACEHOLDER_4%</div>
<div class="textbox">%PLACEHOLDER_5%</div>
</div>
</body>
main.cpp
#include <Arduino.h>
#include <ESPAsyncWebServer.h>
#include <SPIFFS.h>
#include <cstdio>
#include <memory>
#include <mutex>
void logOutput(String string);
//---------- Circular Buffer
template <class T>
class circular_buffer {
public:
explicit circular_buffer(size_t size) :
buf_(std::unique_ptr<T[]>(new T[size])),
max_size_(size)
{
}
void put(T item){
std::lock_guard<std::mutex> lock(mutex_);
buf_[head_] = item;
if(full_){
tail_ = (tail_ + 1) % max_size_;
}
head_ = (head_ + 1) % max_size_;
full_ = head_ == tail_;
}
T get() {
std::lock_guard<std::mutex> lock(mutex_);
if(empty()) {
return T();
}
//Read data and advance the tail (we now have a free space)
auto val = buf_[tail_];
full_ = false;
tail_ = (tail_ + 1) % max_size_;
return val;
}
T get2() {
std::lock_guard<std::mutex> lock(mutex_);
if(empty()) {
return T();
}
auto val = buf_[tail_];
return val;
}
void reset() {
std::lock_guard<std::mutex> lock(mutex_);
head_ = tail_;
full_ = false;
}
bool empty() const {
//if head and tail are equal, we are empty
return (!full_ && (head_ == tail_));
}
bool full() const {
//If tail is ahead the head by 1, we are full
return full_;
}
size_t capacity() const {
return max_size_;
}
size_t size() const {
size_t size = max_size_;
if(!full_) {
if(head_ >= tail_) {
size = head_ - tail_;
} else {
size = max_size_ + head_ - tail_;
}
}
return size;
}
private:
std::mutex mutex_;
std::unique_ptr<T[]> buf_;
size_t head_ = 0;
size_t tail_ = 0;
const size_t max_size_;
bool full_ = 0;
}; //---------- Circular Buffer
circular_buffer<String> circle(20);
void logOutput(String string) {
delay(2000);
circle.put(string);
Serial.println(string);
}
AsyncWebServer server(80);
const char* ssid = "metrici.ro";
const char* password = "cocoscocos";
String processor(const String& var) {
if(var == "PLACEHOLDER_1"){
return circle.get();
} else if(var == "PLACEHOLDER_2") {
return circle.get();
} else if(var == "PLACEHOLDER_3") {
return circle.get();
} else if(var == "PLACEHOLDER_4") {
return circle.get();
} else if(var == "PLACEHOLDER_5") {
return circle.get();
}
return String();
}
void setup() {
Serial.begin(115200);
delay(2000);
if(!SPIFFS.begin(true)) {
logOutput("ERROR ! SPIFFS file system was not mounted. Reformatting !");
}
WiFi.begin(ssid, password);
delay(1000);
int k = 0;
while(WiFi.status() != WL_CONNECTED && k<20) {
delay(1000);
k++;
logOutput("Connecting to WiFi");
}
if(WiFi.status() == WL_CONNECTED) {
logOutput((String)"Connected to: " + ssid + " with IP: " + WiFi.localIP().toString());
} else {
logOutput("Couldn't connect to WiFi ! Restarting in 5 seconds");
delay(5000);
ESP.restart();
}
server.on("/logs", HTTP_GET, [](AsyncWebServerRequest* request){
request->send(SPIFFS, "/events.html", "text/html", false, processor);
});
server.on("/master.css", HTTP_GET, [](AsyncWebServerRequest *request) {
request->send(SPIFFS, "/master.css", "text/css");
});
server.on("/back-image.jpg", HTTP_GET, [](AsyncWebServerRequest *request) {
request->send(SPIFFS, "/back-image.jpg", "image/jpeg");
});
server.on("/logo.png", HTTP_GET, [](AsyncWebServerRequest *request) {
request->send(SPIFFS, "/logo.png", "image/png");
});
server.begin();
delay(5000);
logOutput("After server.begin()");
for(int i = 1; i<=10;i++){
logOutput((String)"Linia " + i);
}
}
void loop() {
logOutput("Beginning the loop()");
logOutput("n");
delay(10000);
}
tl; DR ESP服务器不为原始HTML引用的/jquery-1.9.0.min.js和/events.html文件服务。请继续阅读以获取详细信息。
当$('#big-box').load('events.html')代码执行时，浏览器会在Path /event.html处使用HTTP在您的ESP服务器的背景下呼叫。该路径上的请求似乎并未在ESP侧处理。要处理该路径上的请求，您需要这样的东西：
server.on('/event.html`, [](AsyncWebServerRequest *request) {
request->send(SPIFFS, "/events-log.html", "text/html", false, processor);
})`.
此外，您需要使用以下内容创建events-log.html文件（基本上big-box DIV包含的所有内容）：
<div class="textbox">%PLACEHOLDER_1%</div>
<div class="textbox">%PLACEHOLDER_2%</div>
<div class="textbox">%PLACEHOLDER_3%</div>
<div class="textbox">%PLACEHOLDER_4%</div>
<div class="textbox">%PLACEHOLDER_5%</div>
另外，请注意，您在HTML文件中包含的jquery-1.9.0.min.js文件（使用脚本标签）不会出于相同的原因加载。浏览器将尝试将HTTP获取请求发送到/jquery-1.9.0.min.js，并且由于未处理该路径上的请求，因此浏览器将获得404错误。
如果您要访问此页面的计算机具有Internet访问，则可以通过更改脚本标签为以下片段来加载CDN的jQuery。如果机器无法访问Internet，则需要下载jQuery文件，将其保存到spiffs，并以与其他文件相同的方式提供。
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
相关文章：
- 如果C++类在类方法中具有动态分配，但没有构造函数/析构函数或任何非静态成员，那么它仍然是POD类型吗
- 奇怪的(对我来说)返回声明 - 在谷歌上找不到任何关于它的信息
- 如何在不产生任何垃圾的情况下获得C中的像素
- 为什么我不能在 C++ 中的特定函数重载中调用同一函数的任何其他重载？
- C++映射有2个键，这样任何1个键都可以用来获取值
- Visual Studio(或任何其他工具）能否将地址解释为调用堆栈(boost上下文）的开头
- RtlCaptureStackBackTrace未捕获任何帧
- 链表c++插入，所有情况都已检查，但没有任何工作
- C++模板函数，用于比较任何无符号整数和有符号整数
- Arduino millis(） - millis(） 怎么能等于 0 以外的任何东西?
- 尝试摆脱任何堆内存分配
- 是否有任何C++功能可以对地图进行排序?
- 打印时有二叉树问题.用户输入不打印任何内容
- 共享指针和具有自定义删除程序的唯一指针之间的语法差异背后的任何原因
- 在C++行尾写一个分号或多个分号是否会改变任何内容
- C++类型特征，以查看是否可以<uint32_t>对类型"K"的任何变量调用"static_cast(k)"
- C++ 将 CIN 值存储到任何类型的数组中
- 为什么瓦尔格林德在不释放恶意内存后没有报告任何问题？
- 在HTML内部刷新div，没有任何PHP
- 用PHP或任何其他语言上传巨大的文件
