Question

我有一个网页，其中的表格需要设置一些时间。我将页面存储在Flash中，我想根据eeprom中先前保存的值更新时间。我不想将页面加载到ram中。我想发送该页面，然后使用第二个操作更新时间。我不想使用websockets，我更喜欢不使用AJAX。

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

我的代码如下。我发现了一个具有JASON的AJAX示例，可以满足我的需要。经过一些工作，我想通了。我很高兴现在把它放在我的把戏中。但是我希望有一些简单的方法。

我已经考虑过查看HTML5服务器发送的事件。我还没有弄清楚，但是它应该比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及其更改方法了解得不多，但是我想我知道足够多，也许可以正确地完成它。我在代码中的脚本部分是我认为需要修改时间的方式。我只需要以某种方式参与其中即可。

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

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。

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

我还建议您检出jQuery来操作DOM。对于浏览器来说，它是一个得到很好支持和广泛使用且兼容的Javascript库，从而大大简化了DOM的操作。如果您的浏览器将始终具有实时Internet连接，则可以从内容分发网络中加载jQuery，而不必担心可以从ESP中提供它。

jQUery还可以简化AJAX请求的发布。

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

2 个答案: