每秒刷新一次div答案

【问题标题】：Refresh div every second每秒刷新一次div
【发布时间】：2022-07-06 00:14:21
【问题描述】：

这是为 ESP8266 Web 服务器制作的网页源代码（“@t”、“@a”、“@p”和“@h”使用 C++ 函数替换为实际值）：

<!DOCTYPE html>
<html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Weather Station</title>
    <style>
            html{
            font-family: Helvetica;
            display: inline-block;
            margin: 0px auto;
            text-align: center;
            }
            body{
            margin-top: 50px;
            }
            h1{
            color: #444444;
            margin: 50px auto 30px;
            }
            p{
            font-size: 24px;
            color: #444444;
            margin-bottom: 10px;
            }
    </style>
    
    </head>
    <body>
        <div id="webpage\">
        <h1>Weather Station</h1>
        <p>Temperature: @t &deg;C</p>
        <p>Humidity: @h %</p>
        <p>Pressure: @p hPa</p>
        <p>Altitude: @a m</p>
        </div>
    </body>
</html>

是否可以只刷新源中的一个 div（值部分）？谢谢。

编辑：如果有人对一切如何运作感到好奇，这是主要的源文件：

// SPDX-License-Identifier: GPL-3.0-or-later
/*++

Copyright (c) 2022 Nicolò Cantori

Module Name:

    main.cpp

Abstract:

    Main module for weather station Wi-Fi server.

Author:

    Nicolò Cantori (ncant)      03-July-2022

Revision History:

--*/

#include <Arduino.h>
#include <ESP8266WebServer.h>
#include <Wire.h>
#include <Adafruit_Sensor.h>
#include <Adafruit_BME280.h>
#include "data.hpp"

#define SEA_LEVEL_PRESSURE_HPA (1013.25)

void handle_OnConnect();
void handle_NotFound();

Adafruit_BME280 bme;

float temperature, humidity, pressure, altitude;

//-- Put your SSID & password here: ----------------------------------------
const char* ssid  = "Wi-Fi_Test";
const char* psw   = "nicolo04";
//--------------------------------------------------------------------------

ESP8266WebServer server(80);

String webpage_buf = "";


void setup()
{
    Serial.begin(9600);
    delay(100);

    // Build & store our webpage into a String variable:

    Serial.println("Starting up. Please wait...");

    for (unsigned int i = 0; i < webpage_html_len; i++)
    {
        webpage_buf += (char)webpage_html[i];
    }

    // Initialize sensor:
    bme.begin(0x76);

    // Connect to local Wi-Fi network:

    Serial.print("Connecting to "); Serial.print(ssid);
    WiFi.begin(ssid, psw);

    // Check if board is connected to Wi-Fi network:

   while (WiFi.status() != WL_CONNECTED)
   {
        delay(1000);
        Serial.print(".");
   }

    // Done.

    Serial.println("\nWi-Fi connection enstablished!");
    Serial.print("Got IP: "); Serial.println(WiFi.localIP());
    
    server.on("/", handle_OnConnect);
    server.onNotFound(handle_NotFound);

    server.begin();
    Serial.println("HTTP server is up.");
}


void loop()
{
    server.handleClient();
}


String SendHTML(
    const float temperature,
    const float humidity,
    const float pressure,
    const float altitude
    )

/*++

Routine Description:

    Makes a webpage using the given arguments.

--*/

{
    webpage_buf.replace("@t", String(temperature));
    webpage_buf.replace("@h", String(humidity));
    webpage_buf.replace("@p", String(pressure));
    webpage_buf.replace("@a", String(altitude));

    return webpage_buf;
}


void handle_OnConnect()
{
    temperature = bme.readTemperature();
    humidity    = bme.readHumidity();
    pressure    = bme.readPressure() / 100.0F;
    altitude    = bme.readAltitude(SEA_LEVEL_PRESSURE_HPA);

    server.send(200, "text/html", SendHTML(temperature,
                                           humidity,
                                           pressure,
                                           altitude));
}


void handle_NotFound()
{
    server.send(200, "text/plain", "Not Found.");
}

data.hpp 包含转换后的网页数据：

// SPDX-License-Identifier: GPL-3.0-or-later
/*++

Copyright (c) 2022 Nicolò Cantori

Module Name:

    data.hpp

Abstract:

    Webpage Unicode data blob.

Author:

    Nicolò Cantori (ncant)      03-July-2022

Revision History:

--*/

#pragma once

unsigned char webpage_html[] = {
  0x3c, 0x21, 0x44, 0x4f, 0x43, 0x54, 0x59, 0x50, 0x45, 0x20, 0x68, 0x74,
  0x6d, 0x6c, 0x3e, 0x0d, 0x0a, 0x3c, 0x68, 0x74, 0x6d, 0x6c, 0x20, 0x6c,
  0x61, 0x6e, 0x67, 0x3d, 0x22, 0x65, 0x6e, 0x22, 0x3e, 0x0d, 0x0a, 0x20,
  0x20, 0x20, 0x20, 0x0d, 0x0a, 0x20, 0x20, 0x20, 0x20, 0x3c, 0x68, 0x65,
  0x61, 0x64, 0x3e, 0x0d, 0x0a, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
  0x20, 0x3c, 0x6d, 0x65, 0x74, 0x61, 0x20, 0x63, 0x68, 0x61, 0x72, 0x73,
  0x65, 0x74, 0x3d, 0x22, 0x55, 0x54, 0x46, 0x2d, 0x38, 0x22, 0x3e, 0x0d,
  0x0a, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x3c, 0x6d, 0x65,
  0x74, 0x61, 0x20, 0x6e, 0x61, 0x6d, 0x65, 0x3d, 0x22, 0x76, 0x69, 0x65,
  0x77, 0x70, 0x6f, 0x72, 0x74, 0x22, 0x20, 0x63, 0x6f, 0x6e, 0x74, 0x65,
  0x6e, 0x74, 0x3d, 0x22, 0x77, 0x69, 0x64, 0x74, 0x68, 0x3d, 0x64, 0x65,
  0x76, 0x69, 0x63, 0x65, 0x2d, 0x77, 0x69, 0x64, 0x74, 0x68, 0x2c, 0x20,
  0x69, 0x6e, 0x69, 0x74, 0x69, 0x61, 0x6c, 0x2d, 0x73, 0x63, 0x61, 0x6c,
  0x65, 0x3d, 0x31, 0x22, 0x3e, 0x0d, 0x0a, 0x20, 0x20, 0x20, 0x20, 0x20,
  0x20, 0x20, 0x20, 0x3c, 0x74, 0x69, 0x74, 0x6c, 0x65, 0x3e, 0x57, 0x65,
  0x61, 0x74, 0x68, 0x65, 0x72, 0x20, 0x53, 0x74, 0x61, 0x74, 0x69, 0x6f,
  0x6e, 0x3c, 0x2f, 0x74, 0x69, 0x74, 0x6c, 0x65, 0x3e, 0x0d, 0x0a, 0x20,
  0x20, 0x20, 0x20, 0x3c, 0x73, 0x74, 0x79, 0x6c, 0x65, 0x3e, 0x0d, 0x0a,
  0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
  0x68, 0x74, 0x6d, 0x6c, 0x7b, 0x0d, 0x0a, 0x20, 0x20, 0x20, 0x20, 0x20,
  0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x66, 0x6f, 0x6e, 0x74, 0x2d,
  0x66, 0x61, 0x6d, 0x69, 0x6c, 0x79, 0x3a, 0x20, 0x48, 0x65, 0x6c, 0x76,
  0x65, 0x74, 0x69, 0x63, 0x61, 0x3b, 0x0d, 0x0a, 0x20, 0x20, 0x20, 0x20,
  0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x64, 0x69, 0x73, 0x70,
  0x6c, 0x61, 0x79, 0x3a, 0x20, 0x69, 0x6e, 0x6c, 0x69, 0x6e, 0x65, 0x2d,
  0x62, 0x6c, 0x6f, 0x63, 0x6b, 0x3b, 0x0d, 0x0a, 0x20, 0x20, 0x20, 0x20,
  0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x6d, 0x61, 0x72, 0x67,
  0x69, 0x6e, 0x3a, 0x20, 0x30, 0x70, 0x78, 0x20, 0x61, 0x75, 0x74, 0x6f,
  0x3b, 0x0d, 0x0a, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
  0x20, 0x20, 0x20, 0x74, 0x65, 0x78, 0x74, 0x2d, 0x61, 0x6c, 0x69, 0x67,
  0x6e, 0x3a, 0x20, 0x63, 0x65, 0x6e, 0x74, 0x65, 0x72, 0x3b, 0x0d, 0x0a,
  0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
  0x7d, 0x0d, 0x0a, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
  0x20, 0x20, 0x20, 0x62, 0x6f, 0x64, 0x79, 0x7b, 0x0d, 0x0a, 0x20, 0x20,
  0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x6d, 0x61,
  0x72, 0x67, 0x69, 0x6e, 0x2d, 0x74, 0x6f, 0x70, 0x3a, 0x20, 0x35, 0x30,
  0x70, 0x78, 0x3b, 0x0d, 0x0a, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
  0x20, 0x20, 0x20, 0x20, 0x20, 0x7d, 0x0d, 0x0a, 0x20, 0x20, 0x20, 0x20,
  0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x68, 0x31, 0x7b, 0x0d,
  0x0a, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
  0x20, 0x63, 0x6f, 0x6c, 0x6f, 0x72, 0x3a, 0x20, 0x23, 0x34, 0x34, 0x34,
  0x34, 0x34, 0x34, 0x3b, 0x0d, 0x0a, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
  0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x6d, 0x61, 0x72, 0x67, 0x69, 0x6e,
  0x3a, 0x20, 0x35, 0x30, 0x70, 0x78, 0x20, 0x61, 0x75, 0x74, 0x6f, 0x20,
  0x33, 0x30, 0x70, 0x78, 0x3b, 0x0d, 0x0a, 0x20, 0x20, 0x20, 0x20, 0x20,
  0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x7d, 0x0d, 0x0a, 0x20, 0x20,
  0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x70, 0x7b,
  0x0d, 0x0a, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
  0x20, 0x20, 0x66, 0x6f, 0x6e, 0x74, 0x2d, 0x73, 0x69, 0x7a, 0x65, 0x3a,
  0x20, 0x32, 0x34, 0x70, 0x78, 0x3b, 0x0d, 0x0a, 0x20, 0x20, 0x20, 0x20,
  0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x63, 0x6f, 0x6c, 0x6f,
  0x72, 0x3a, 0x20, 0x23, 0x34, 0x34, 0x34, 0x34, 0x34, 0x34, 0x3b, 0x0d,
  0x0a, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
  0x20, 0x6d, 0x61, 0x72, 0x67, 0x69, 0x6e, 0x2d, 0x62, 0x6f, 0x74, 0x74,
  0x6f, 0x6d, 0x3a, 0x20, 0x31, 0x30, 0x70, 0x78, 0x3b, 0x0d, 0x0a, 0x20,
  0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x7d,
  0x0d, 0x0a, 0x20, 0x20, 0x20, 0x20, 0x3c, 0x2f, 0x73, 0x74, 0x79, 0x6c,
  0x65, 0x3e, 0x0d, 0x0a, 0x0d, 0x0a, 0x20, 0x20, 0x20, 0x20, 0x3c, 0x21,
  0x2d, 0x2d, 0x0d, 0x0a, 0x20, 0x20, 0x20, 0x20, 0x3c, 0x73, 0x63, 0x72,
  0x69, 0x70, 0x74, 0x20, 0x74, 0x79, 0x70, 0x65, 0x20, 0x3d, 0x20, 0x22,
  0x74, 0x65, 0x78, 0x74, 0x2f, 0x4a, 0x61, 0x76, 0x61, 0x73, 0x63, 0x72,
  0x69, 0x70, 0x74, 0x22, 0x3e, 0x0d, 0x0a, 0x20, 0x20, 0x20, 0x20, 0x20,
  0x20, 0x20, 0x20, 0x66, 0x75, 0x6e, 0x63, 0x74, 0x69, 0x6f, 0x6e, 0x20,
  0x41, 0x75, 0x74, 0x6f, 0x52, 0x65, 0x66, 0x72, 0x65, 0x73, 0x68, 0x28,
  0x74, 0x29, 0x20, 0x7b, 0x0d, 0x0a, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
  0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x73, 0x65, 0x74, 0x54, 0x69, 0x6d,
  0x65, 0x6f, 0x75, 0x74, 0x28, 0x22, 0x6c, 0x6f, 0x63, 0x61, 0x74, 0x69,
  0x6f, 0x6e, 0x2e, 0x72, 0x65, 0x6c, 0x6f, 0x61, 0x64, 0x28, 0x74, 0x72,
  0x75, 0x65, 0x29, 0x3b, 0x22, 0x2c, 0x20, 0x74, 0x29, 0x3b, 0x0d, 0x0a,
  0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x7d, 0x0d, 0x0a, 0x20,
  0x20, 0x20, 0x20, 0x3c, 0x2f, 0x73, 0x63, 0x72, 0x69, 0x70, 0x74, 0x3e,
  0x0d, 0x0a, 0x20, 0x20, 0x20, 0x20, 0x2d, 0x2d, 0x3e, 0x0d, 0x0a, 0x20,
  0x20, 0x20, 0x20, 0x0d, 0x0a, 0x20, 0x20, 0x20, 0x20, 0x3c, 0x2f, 0x68,
  0x65, 0x61, 0x64, 0x3e, 0x0d, 0x0a, 0x20, 0x20, 0x20, 0x20, 0x3c, 0x62,
  0x6f, 0x64, 0x79, 0x20, 0x6f, 0x6e, 0x6c, 0x6f, 0x61, 0x64, 0x20, 0x3d,
  0x20, 0x22, 0x4a, 0x61, 0x76, 0x61, 0x53, 0x63, 0x72, 0x69, 0x70, 0x74,
  0x3a, 0x41, 0x75, 0x74, 0x6f, 0x52, 0x65, 0x66, 0x72, 0x65, 0x73, 0x68,
  0x28, 0x31, 0x30, 0x30, 0x30, 0x29, 0x3b, 0x22, 0x3e, 0x0d, 0x0a, 0x20,
  0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x3c, 0x64, 0x69, 0x76, 0x20,
  0x69, 0x64, 0x3d, 0x22, 0x77, 0x65, 0x62, 0x70, 0x61, 0x67, 0x65, 0x5c,
  0x22, 0x3e, 0x0d, 0x0a, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
  0x3c, 0x68, 0x31, 0x3e, 0x57, 0x65, 0x61, 0x74, 0x68, 0x65, 0x72, 0x20,
  0x53, 0x74, 0x61, 0x74, 0x69, 0x6f, 0x6e, 0x3c, 0x2f, 0x68, 0x31, 0x3e,
  0x0d, 0x0a, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x3c, 0x70,
  0x3e, 0x54, 0x65, 0x6d, 0x70, 0x65, 0x72, 0x61, 0x74, 0x75, 0x72, 0x65,
  0x3a, 0x20, 0x40, 0x74, 0x20, 0x26, 0x64, 0x65, 0x67, 0x3b, 0x43, 0x3c,
  0x2f, 0x70, 0x3e, 0x0d, 0x0a, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
  0x20, 0x3c, 0x70, 0x3e, 0x48, 0x75, 0x6d, 0x69, 0x64, 0x69, 0x74, 0x79,
  0x3a, 0x20, 0x40, 0x68, 0x20, 0x25, 0x3c, 0x2f, 0x70, 0x3e, 0x0d, 0x0a,
  0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x3c, 0x70, 0x3e, 0x50,
  0x72, 0x65, 0x73, 0x73, 0x75, 0x72, 0x65, 0x3a, 0x20, 0x40, 0x70, 0x20,
  0x68, 0x50, 0x61, 0x3c, 0x2f, 0x70, 0x3e, 0x0d, 0x0a, 0x20, 0x20, 0x20,
  0x20, 0x20, 0x20, 0x20, 0x20, 0x3c, 0x70, 0x3e, 0x41, 0x6c, 0x74, 0x69,
  0x74, 0x75, 0x64, 0x65, 0x3a, 0x20, 0x40, 0x61, 0x20, 0x6d, 0x3c, 0x2f,
  0x70, 0x3e, 0x0d, 0x0a, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
  0x3c, 0x2f, 0x64, 0x69, 0x76, 0x3e, 0x0d, 0x0a, 0x20, 0x20, 0x20, 0x20,
  0x3c, 0x2f, 0x62, 0x6f, 0x64, 0x79, 0x3e, 0x0d, 0x0a, 0x3c, 0x2f, 0x68,
  0x74, 0x6d, 0x6c, 0x3e
};

unsigned int webpage_html_len = 1168;

【问题讨论】：

什么，你是如何通过 apache、nginx 或者仅仅作为一个简单的文件访问来加载这个页面的
@DeanVanGreunen 这是有趣的部分。你看，我必须告诉 ESP 板如何构建它将传输的网页。为此，在不修改原始 html 源文件的情况下，我必须将 html 文件的内容转换为（Unicode）十六进制，然后将这些值存储到 char 数组中。这样做董事会已经“知道”网页应该是怎样的，它唯一会做的就是在运行时重建它（使用字符串值），然后将结果获取到一个函数中（需要将 html 数据存储到字符串变量）。
您可以向页面添加一些 JS 以定期重新获取这些值，但您还必须修改服务器以处理该请求。
@JohnnyMopp 好吧，即使使用这种（非常糟糕的）设置，我也可以运行 JS 脚本。 JS 工作。我只是缺少使它工作的代码
丑陋而快速的解决方案是setTimeout(() => window.location.reload(), 1000)，更好的解决方案是使用 ajax 检索这些值并更新 dom，但您需要一个端点来返回新值。问题是，当你重新加载时，你会得到新的值还是你仍然会得到旧的页面

标签： html

【解决方案1】：

您可以让网络服务器返回 2 个页面。主索引页和以 JSON 格式返回数据的第二页。主页可以使用Javascript定期加载第二页并更新主页中的字段。

将字段更改为可更新的范围

    <p>Temperature: <span id="temperature"></span> &deg;C</p>
    <p>Humidity: <span id="humidity"></span> %</p>
    <p>Pressure: <span id="pressure"></span> hPa</p>
    <p>Altitude: <span id="altitude"></span> m</p>

然后添加 JS 来获取数据并定期更新 spans

<script>
    const update = () => {
        // Get the JSON data and set spans with the data
        fetch('http://127.0.0.1/get_data.json')
          .then(response => response.json())
          .then(data => {
              document.getElementById("temperature").textContent = data.temperature;
              document.getElementById("humidity").textContent = data.humidity;
             // Repeat for others....
        });
    }
    // Update every 10 seconds
    setInterval(update, 10000);
    // Initial update
    update();
</script>

然后修改您的服务器以返回 2 个页面。第一个是添加了上述内容的主页。第二个应该是JSON格式的数据。

void send_main_page() {
  server.send(200, "text/html", [text for main page as above]);
}

void send_data() {
  // Read data from sensors and build JSON string
  String json = "{\"temperature\":"
  json += bme.readTemperature();
  json += ",\"humidity\":";
  json += bme.readTemperature();
  // finish others
  json += "}";
  // You can also use a JSON library to build the JSON
  server.send(200, "application/json", json);
}

void setup(void){
  // Setup server....

  server.on("/", send_main_page);
  server.on("/get_data.json", send_data);

  // Finish setup
}

JSON 可能如下所示：

{
    "temperature": 32.0,
    "humidity": 50.0,
    "pressure": 20.0,
    "altitude": 10.0
}

这只是一个粗略的轮廓，我想不通，所以可能还有很多需要修复的地方。

【讨论】：