刷新 div inside HTML 而没有任何 PHP？

Question

下午好！

我的项目背后的想法是将手工制作的日志发送到网页，这样我就不必完全依赖串行监视器。

我正在将字符串从 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); });

用我想要的任何数据替换它找到的占位符。

我正在使用循环缓冲区，这样我就不会用完所有内存。

我用谷歌搜索了我应该如何刷新 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);
}

Answer 1

TL;DR ESP 服务器不提供原始 HTML 引用的 /jquery-1.9.0.min.js 和 /events.html 文件。继续阅读以了解详细信息。

当 $('#big-box').load('events.html') 代码执行时，浏览器在后台对您的 ESP 服务器进行 HTTP GET 调用，路径为 /event.html。该路径上的请求似乎没有在 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 文件出于同样的原因不会被加载。浏览器将尝试向 /jquery-1.9.0.min.js 发送 HTTP GET 请求，并且由于未处理该路径上的请求，浏览器将收到 404 错误。

如果您访问此页面的计算机可以访问互联网，那么您可以通过将脚本标记更改为以下代码段来从 CDN 加载 jQuery。如果机器无法访问互联网，那么您需要下载 jQuery 文件，将其保存到 SPIFFS，并以与其他文件相同的方式提供。

   <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

刷新 div inside HTML 而没有任何 PHP？

Refreshing div inside HTML without any PHP?

html

javascript

c++

jquery

esp32

问题是我应该加载什么而不是 php 文件？

events.html

main.cpp