首页 > 解决方案 > 一种更新 ESP8266 提供的网页上的值的简单方法

问题描述

我有一个带有表单的网页来设置一些时间。我将页面存储在闪存中,我想从之前保存在 eeprom 中的值更新时间。我不想将页面加载到内存中。我想发送页面,然后通过第二次操作更新时间。我不想使用 websockets,也不想使用 AJAX。

我希望有一个更简单的方法。也许是 GET 请求?并以某种方式将其链接到表单中的变量。

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

我考虑过查看 HTML5 Server-Sent Events。我还没有弄清楚,但它应该比 AJAX 更简单。我想我可以提供该页面,然后不久之后,发送值以填充表单中的时间。由于“稍后时间短”,它似乎有点笨拙。我希望我可以通过服务器启动它,比如 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 以及如何改变事物,但我认为我知道的足够多,也许可以把它做好。我在代码中的脚本部分是我认为我需要修改时间的方式。我只需要以某种方式进入那个时代。

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

输入表格进行修改

标签: c++formsarduinowebpageesp8266

解决方案


AJAX 确实是最简单的方法。

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

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

如果这对您很重要,Microsoft 浏览器尚不支持服务器端事件(当然这在未来可能会改变)。

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

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

所以你只剩下AJAX了。

但是,不需要使用 JSON 或 XML 或任何其他具有 AJAX 的特定表示。AJAX 不知道它移动的数据的格式。因此,您可以将所需的值作为文本片段返回,而不必担心创建和解析 JSON。

我还建议查看jQuery来操作 DOM。它是一个非常受支持、广泛使用和兼容的浏览器 Javascript 库,极大地简化了对 DOM 的操作。如果您的浏览器始终具有实时 Internet 连接,您可以从内容分发网络加载 jQuery,而不必担心从 ESP 提供它。

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


推荐阅读