一种在 ESP8266 服务的网页上更新值的简单方法

Question

我有一个网页，其中有一个表格可以设置一些时间。我将页面存储在闪存中，我想根据之前保存在 eeprom 中的值更新时间。我不想将页面加载到 ram 中。我想发送页面，然后通过第二次操作更新时间。我不想使用 websockets，我也不喜欢使用 AJAX。

我希望有一个更简单的方法。也许是 GET 请求？并且以某种方式 link 到表单中的变量。

我的代码如下。我找到了一个 AJAX 的 JASON 示例，它满足了我的需要。经过一些工作，我想通了。我很高兴现在我的技巧包里有了它。但我希望有更简单的东西。

我考虑过查看 HTML5 Server-Sent 事件。我还没有弄清楚，但它应该比 AJAX 更简单。我以为我可以提供页面，然后在短时间后发送值以填充表单中的时间。因为 "short time later" 它看起来有点笨拙。我希望我可以通过服务器使用类似 onload 的方式启动它。

```static const char PROGMEM relayTimesHTML[] = R"rawliteral(
<!DOCTYPE html>
<html>
<head>
<title>Set relay on and off times</title>
</head>
<body>
<body>
<form id="myForm" method="post" action="/saveTimes" >
<br>
  <fieldset>
    <legend>Clock timer control:</legend>
  <input type="radio" name="timerEnabled" value="timerDisabled" checked> Timer Disabled
  <input type="radio" name="timerEnabled" value="      timerEnabled"> Timer Enabled<br>
  <br>

  Turn On time: <input id="onTime" type="time" name="on_time" value=01:17 ><br><br>

  Turn Off time: <input id="offTime" type="time" name="off_time" value=02:23 ><br><br>
  <input type="submit">
    </fieldset>
</form> 

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
document.getElementById("myForm").elements["onTime"].value= "03:33";
document.getElementById("myForm").elements["offTime"].value= "04:00";
}
</script>

</body>
</html>
)rawliteral";
```

我想把onTime/on_time的值改成ESP里的真实当前值。一种替换当前值的简单方法。

还有。我不太了解 DOM 以及如何更改内容，但我认为我知道的足够多，也许可以正确完成它。我在代码中的脚本部分是我认为我需要修改时间的方式。我只需要以某种方式让时间融入其中。

我不是程序员，我是硬件设计师。所有编程的东西对我来说都是挑战。

Answer 1

一种简单的方法是在 n 秒内重新加载整个网页。在<html>标签后添加：

<meta http-equiv='refresh' content='30'/>

浏览器现在每 30 秒重新加载一次页面。您必须自己更改页面布局中的计时器值（ESP 端）。

如果您只想（最好）更新网站的某些部分，您确实需要 AJAX 或同等技术。

GET 和 POST 是将表单数据发送回服务器的方式。

Answer 2

AJAX 老实说，这是最简单的方法。

AJAX 只是 Javascript 向 Web 服务器发出 HTTP 请求以获取数据片段。该片段可以是 HTML、JSON，或者只是一小段文本。

如您所述，另一种选择是 HTML5 Server Side Events。服务器端事件对于服务器来说比 AJAX 更难处理。使用 AJAX，服务器只处理正常的 HTTP 请求并完成。对于服务器端事件，服务器必须保持客户端的 HTTP 连接打开并继续为来自该连接的请求提供服务。它们基本上是通过保持打开的 HTTP 连接的持续 AJAX 请求流。服务器的管理和开销要多一些。

如果这对你很重要，Server Side Events are not yet supported under Microsoft browsers（当然这可能会在未来改变）。

另一种可能性是 WebSockets，但同样，这对服务器来说需要更多的工作，而且它们也是构建在 AJAX 之上的。如果您想尝试它们，可以使用 ESP 的 WebSocket 库。他们不太可能让您的代码比 AJAX 更简单。

还有其他协议，例如 ESP 可以使用的 UDP，但无法通过浏览器 Javascript 访问它们，因此它们不是初学者。

所以你还剩下 AJAX。

然而，没有必要使用 JSON 或 XML 或任何其他带有 AJAX 的特定表示。 AJAX 不知道它移动的数据格式。所以你可以 return 你想要的值作为文本片段而不用担心创建和解析 JSON.

我还建议查看 jQuery 以了解如何操纵 DOM。它是一个得到很好支持、广泛使用和兼容的浏览器 Javascript 库，大大简化了 DOM 的操作。如果您的浏览器始终具有实时 Internet 连接，您可以从内容分发网络加载 jQuery 而不必担心从 ESP 提供服务。

jQUery 还可以简化发出 AJAX 请求。

一种在 ESP8266 服务的网页上更新值的简单方法

A simple way to update values on webpage served by ESP8266

c++

forms

webpage

arduino

esp8266