html刷新页面_基于CSS框架的S71200Web页面制作续

之前通过静态HTML和CSS文件制作的页面，美观度是没有什么问题了，但是为了数据实时更新显示，需要通过一条语句不停的刷新页面来实现，在页面文件比较少的情况下，这种刷新可能无伤大雅，但是当页面很多，或者一个页面上有好多条显示数据，控制按钮，这种刷新就成了无法忍受的硬伤，那么怎么让页面不刷新，数据也能实时更新呢，Javescript脚本就该登台了，具体机制我不做过多介绍，Javascript到底是啥我也不多说了，这里只注重实现，毕竟搞工业自动化又不是专职做网页。

引言

一个页面中有输入的变量，像是表单，按钮等，也有输出变量，像数据或者图形，我在上次的页面基础上增加一个文本框，用于输入变量，页面布局是这样的

最后想要实现不刷新页面的情况下，所有数值实时变化，按下按钮后，对应的动作『即时』生效。

准备工作

首先需要准备两个html文件，一个文件放入输入变量，一个文件放入输出变量，js脚本工作时会从输出变量文件中找到需要的变量显示在页面中，或者把页面中得内容写到输入变量页面中得变量里，这里我把两个文件分别命名为IO_Output.html和IO_Input.html

IO_Output.html的内容如下，这是个Json结构，类似于Pyhton中的字典，通过『键』可以访问到冒号后面的『值』，也就是常说的键值对

{
    "Device1":":="Bootstrap_DB".Device1:",
    "Device2":":="Bootstrap_DB".Device2:",
    "Device3":":="Bootstrap_DB".Device3:",
    "Temperature":":="Bootstrap_DB".Temperature:",
    "Humidity":":="Bootstrap_DB".Humidity:",
    "Pressure":":="Bootstrap_DB".Pressure:",
    "Tag1":":="Bootstrap_DB".Tag1:"}

IO_Input.html的内容如下

:="Bootstrap_DB".Device1::="Bootstrap_DB".Device2::="Bootstrap_DB".Device3::="Bootstrap_DB".Tag1:

这样两个文件就准备好了，接下来就可以开始在HTML文件中调用它们实现数据实时读写了。

实际的使用中，还是按照之前说的几种操作来举例

• 网页端按下按钮控制PLC的变量

• 在网页端显示PLC的某个变量

• 网页端输入某个数字到PLC内某个变量

不过这次都通过Js脚本来实现。

开始之前，还有一点需要在html文件中做一下修改，就是要给每一个在页面中需要显示或者输入的元素给定一个唯一的id值，因为Js脚本是通过id值找到页面中的元素的，例如第一行的温度，就需要在html文件中温度的元素处给定一个id值，这里给定的id值是Temperature，每一个元素的id值必须唯一

<li class="nav-item">
<button type="button" class="btn btn-primary">
    温度 <span class="badge badge-light" id="Temperature">0span>
button>li>

网页端显示PLC的某个变量

首先需要在Head文件中增加Js脚本的调用，通过下面这条实现，具体JQuery是啥，去百度吧，文章大把的

<script type="text/javascript" src="src/js/jquery-2.0.2.min.js">script>

要实时的读取PLC的变量在网页中显示，就需要Js脚本按照固定的时间间隔去获取IO_Output.html文件中的变量，之后放到合适的位置显示它。需要有一个如下的结构来写Js代码，在setInterval函数里面放入读变量的代码就可以实现数据的实时显示，因为这个函数是按照1000ms的周期循环执行