如何在客户端的网页中动态更改<INPUT Value="...>

Question

我在基于 ESP8266 的服务器和客户端 (firefox) 之间的基于 Web 的配置界面上工作。该页面基于封装的 table 标签。 An 有一个属性 value=" "，它允许给 name=" " 属性一个预定义的值。该值显示在页面中，可以由用户更改，并在峰会上作为配置数据发送回服务器。该页面存储在 PROGMEM 中，我无法访问 value=" " 属性以更新它们，以防新输入的配置数据更改它们。

== 我的问题是：是否有，如果有，使用更新的配置数据将 PROGMEM 存储页面中的此固定内容获取到客户端的方法是什么。

== 如果没有办法做到这一点，那么显示带有动态配置数据的基于 PROGMEM 的网页的最佳方式是什么。

Config page with some predefined values

<FORM action="/" method="post" id="userform">
<table Class="TR1">   
<Caption Class="CAP">   Product characteristics </Caption>
<thead class="TR1">   
<tr>   
 <Th class="TH1"> Group </Th>
 <Th class="TH2"> Parameter </Th>
 <Th class="TH3"> Value </Th>
 <Th class="TH4"> Type </Th>
 <Th class="TH5"> Subval </Th>
 <Th class="TH5">  </Th>
 <Th class="TH5">  </Th>
</TR>      
</Thead>   
<tbody class="TR1">   
<tr class="TR1">   
 <Td class="TD1"> Network </TD>
 <Td class="TD2"> SSID </TD>
 <Td class="TD3"> <input type="text"  name="ssid" onkeypress="if (event.keyCode == 13) { return false;}"> </TD>
 <Td class="TD4">  </TD>
 <Td class="TD5">  </TD>
 <Td class="TD5">  </TD>
 <Td class="TD5">  </TD>
</TR>   
<tr class="TR1">   
 <Td class="TD1">  </TD>
 <Td class="TD2"> Password </TD>
 <Td class="TD3"> <input type="password"  name="password" onkeypress="if (event.keyCode == 13) { return false;}"> </TD>
 <Td class="TD4">  </TD>
 <Td class="TD5">  </TD>
 <Td class="TD5">  </TD>
 <Td class="TD5">  </TD>
</TR>   
<tr class="TR1">   
 <Td class="TD1">  </TD>
 <Td class="TD2"> Encryption </TD>
 <Td class="TD3"> <input list="encrypcion"  name="encrypcion" onkeypress="if (event.keyCode == 13) { return false;}"> </TD>
 <Td class="TD4">  </TD>
 <Td class="TD5">  </TD>
 <Td class="TD5">  </TD>
 <Td class="TD5">  </TD>
</TR>   
<tr class="TR1">   
 <Td class="TD1">  </TD>
 <Td class="TD2"> Key nr </TD>
 <Td class="TD3"> <input type="number" name="keynr" min="1" max="4" value="1" step="1" onkeypress="if (event.keyCode == 13) { return false;}"> </TD>
 <Td class="TD4">  </TD>
 <Td class="TD5">  </TD>
 <Td class="TD5">  </TD>
 <Td class="TD5">  </TD>
</TR>   
<tr class="TR1">   
 <Td class="TD1">  </TD>
 <Td class="TD2"> IPaddess </TD>
 <Td class="TD3"> <input type="text"  name="IPaddess" value="192.168.1.xxx" onkeypress="if (event.keyCode == 13) { return false;}"> </TD>
 <Td class="TD4">  </TD>
 <Td class="TD5">  </TD>
 <Td class="TD5">  </TD>
 <Td class="TD5">  </TD>
</TR>   
<tr class="TR1">   
 <Td class="TD1">  </TD>
 <Td class="TD2"> DHCP </TD>
 <Td class="TD3"> Yes: <INPUT type="radio" name="DHCP" value="1"> &nbsp &nbsp No: <INPUT type="radio" name="DHCP" value="0">  </TD>
 <Td class="TD4">  </TD>
 <Td class="TD5">  </TD>
 <Td class="TD5">  </TD>
 <Td class="TD5">  </TD>
</TR>      
<tr class="TR1">   
 <Td class="TD1"> Serial </TD>
 <Td class="TD2"> Port nr </TD>
 <Td class="TD3"> <input type="number" name="sprt" min="1" max="4" value="1" onkeypress="if (event.keyCode == 13) { return false;}"> </TD>
 <Td class="TD4">  </TD>
 <Td class="TD5">  </TD>
 <Td class="TD5">  </TD>
 <Td class="TD5">  </TD>
</TR>   
<tr class="TR1">   
 <Td class="TD1">  </TD>
 <Td class="TD2"> Baud rate </TD>
 <Td class="TD3"> <input list="baudrate" name="baudrate"> </TD>
 <Td class="TD4">  </TD>
 <Td class="TD5">  </TD>
 <Td class="TD5">  </TD>
 <Td class="TD5">  </TD>
</TR>   
<tr class="TR1">   
 <Td class="TD1">  </TD>
 <Td class="TD2"> Serial frame </TD>
 <Td class="TD3"> <input list="sframe" name="sframe"> </TD>
 <Td class="TD4">  </TD>
 <Td class="TD5">  </TD>
 <Td class="TD5">  </TD>
 <Td class="TD5">  </TD>
</TR>      
<tr class="TR1">   
 <Td class="TD1"> Calendar </TD>
 <Td class="TD2"> Time </TD>
 <Td class="TD3"> <input type="text"  name="time" onkeypress="if (event.keyCode == 13) { return false;}"> </TD>
 <Td class="TD4">  </TD>
 <Td class="TD5">  </TD>
 <Td class="TD5">  </TD>
 <Td class="TD5">  </TD>
</TR>   
<tr class="TR1">   
 <Td class="TD1">  </TD>
 <Td class="TD2"> Date </TD>
 <Td class="TD3"> <input type="text"  name="date" onkeypress="if (event.keyCode == 13) { return false;}"> </TD>
 <Td class="TD4">  </TD>
 <Td class="TD5">  </TD>
 <Td class="TD5">  </TD>
 <Td class="TD5">  </TD>
</TR>   
<tr class="TR1">   
 <Td class="TD1">  </TD>
 <Td class="TD2"> Alarm 1 </TD>
 <Td class="TD3"> <input type="text"  name="alarm1" onkeypress="if (event.keyCode == 13) { return false;}"> </TD>
 <Td class="TD4">  </TD>
 <Td class="TD5">  </TD>
 <Td class="TD5">  </TD>
 <Td class="TD5">  </TD>
</TR>   
<tr class="TR1">   
 <Td class="TD1">  </TD>
 <Td class="TD2"> Alarm 2 </TD>
 <Td class="TD3"> <input type="text"  name="alarm2" onkeypress="if (event.keyCode == 13) { return false;}"> </TD>
 <Td class="TD4">  </TD>
 <Td class="TD5">  </TD>
 <Td class="TD5">  </TD>
 <Td class="TD5">  </TD>
</TR>   
   
<tr class="TR1">   
 <Td class="TD1"> MQTT </TD>
 <Td class="TD2"> User </TD>
 <Td class="TD3"> <input type="text"  name="user" onkeypress="if (event.keyCode == 13) { return false;}"> </TD>
 <Td class="TD4">  </TD>
 <Td class="TD5">  </TD>
 <Td class="TD5">  </TD>
 <Td class="TD5">  </TD>
</TR>   
<tr class="TR1">   
 <Td class="TD1">  </TD>
 <Td class="TD2"> Pasword </TD>
 <Td class="TD3"> <input type="password"  name="password" onkeypress="if (event.keyCode == 13) { return false;}"> </TD>
 <Td class="TD4">  </TD>
 <Td class="TD5">  </TD>
 <Td class="TD5">  </TD>
 <Td class="TD5">  </TD>
</TR>   
<tr class="TR1">   
 <Td class="TD1">  </TD>
 <Td class="TD2"> Server </TD>
 <Td class="TD3"> <input type="text"  name="server" onkeypress="if (event.keyCode == 13) { return false;}"> </TD>
 <Td class="TD4">  </TD>
 <Td class="TD5">  </TD>
 <Td class="TD5">  </TD>
 <Td class="TD5">  </TD>
</TR>   
<tr class="TR1">   
 <Td class="TD1">  </TD>
 <Td class="TD2"> Port </TD>
 <Td class="TD3"> <input type="number" name="mqttprt" min="1880" value="1883" step="1" placeholder=1883 onkeypress="if (event.keyCode == 13) { return false;}"> </TD>
 <Td class="TD4">  </TD>
 <Td class="TD5">  </TD>
 <Td class="TD5">  </TD>
 <Td class="TD5">  </TD>
</TR>   
<tr class="TR1">   
 <Td class="TD1">  </TD>
 <Td class="TD2"> Topic 1 </TD>
 <Td class="TD3"> <input type="text"  name="topic1" onkeypress="if (event.keyCode == 13) { return false;}"> </TD>
 <Td class="TD4"> Type </TD>
 <Td class="TD5"> <input list="ttype" name="ttype"> </TD>
 <Td class="TD5">  </TD>
 <Td class="TD5">  </TD>
</TR>   
<tr class="TR1">   
 <Td class="TD1">  </TD>
 <Td class="TD2"> Topic 2 </TD>
 <Td class="TD3"> <input type="text"  name="topic2" onkeypress="if (event.keyCode == 13) { return false;}"> </TD>
 <Td class="TD4"> Type </TD>
 <Td class="TD5"> <input list="ttype" name="ttype"> </TD>
 <Td class="TD5">  </TD>
 <Td class="TD5">  </TD>
</TR>   
<tr class="TR1">   
 <Td class="TD1">  </TD>
 <Td class="TD2"> Topic 3 </TD>
 <Td class="TD3"> <input type="text"  name="topic3" onkeypress="if (event.keyCode == 13) { return false;}"> </TD>
 <Td class="TD4"> Type </TD>
 <Td class="TD5"> <input list="ttype" name="ttype"> </TD>
 <Td class="TD5">  </TD>
 <Td class="TD5">  </TD>
</TR>   
<tr class="TR1">   
 <Td class="TD1">  </TD>
 <Td class="TD2"> Topic 4 </TD>
 <Td class="TD3"> <input type="text"  name="topic4" onkeypress="if (event.keyCode == 13) { return false;}"> </TD>
 <Td class="TD4"> Type </TD>
 <Td class="TD5"> <input list="ttype" name="ttype"> </TD>
 <Td class="TD5">  </TD>
 <Td class="TD5">  </TD>
</TR>   
   
</tbody>   
<tfoot>   
<tr class="FT1">   
 <td colspan="7"> EOT </td>
</tr>   
</tfoot>   
</TABLE>   
<INPUT type="submit" value="Send"> <INPUT type="reset">
</FORM>
</body>
</html>

Answer 1

你可以让你的 ESP8266 提供一个额外的 JavaScript 文件，它只是设置一些全局变量。每次请求时，ESP8266 都会根据配置值重新创建该文件。

所以当浏览器发出请求时：GET /config.js HTTP/1.1

服务器响应：

window.config = {
  ssid: "my network ssid",
  password: "my network password",
  //... continue with other config values
};

确保在 html 中包含脚本标记，以使浏览器获取 JS 文件。为了设置 <input> 标签的初始 value，您可能会使用更多的 JS：

<body>
  ...
  <!-- put this at the end of your HTML <body> -->
  <script src="/config.js"></script>
  <!-- now you can access your `window.config` in javascript -->

  <script>
  var inputs = document.getElementsByTagName('input');

  for (var i = 0; i < inputs.length; i++) {
    var input = inputs[i];
    // make sure names used in config.js match an input's `name` attribute
    input.value = window.config[input.name]; 
  }
  </script>
</body>

总之，您提供存储在 PROGMEM 中的静态（永不更改）HTML 文档。

当浏览器加载页面并呈现 <table> 时，但所有 <input> 元素最初都具有空白值。
浏览器看到<script src="/config.js">并返回到服务器得到config.js。
ESP8266构造config.js发送给浏览器
浏览器运行 config.js，它在 window.config 中存储了一些值。
最终运行并设置 <input> 个元素的值。

如果遇到困难，请随时发表评论。希望这对您有所帮助！

如何在客户端的网页中动态更改<INPUT Value="...>

How to dynamic change <INPUT Value="...> in a web page on a client

configuration

webserver

esp8266