标签：jQuery 自定义 html PLC 刷新 data 页面
1. 需求
- 在最简单的场景里面，我们需要在用户自定义页面显示一些数据，和输入一些数据。如下源代码：
<!-- AWP_In_Variable Name='"enable_cycle"' -->
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://wwww.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="Refresh" content="5" />
<title>COMM_Func</title>
</head>
<body>
<p><strong>数据读取</strong></p>
<p>总计数 :="totalCnt":</p>
<p>总错误进位 :="faultCntC":</p>
<p>总错误 :="faultCnt":</p>
<p>当前循环过程数据 :="CurrData":</p>
<p><strong>数据写入</strong></p>
<form action="" method="post">
<input name='"enable_cycle"' type="text" />
<input name="" type="submit" value="开始使能" />
</form>
</body>
</html>
- 在这个静态页面里面，用到
<meta http-equiv="Refresh" content="5" />做5秒一次的刷新。
- 这里有个痛点，每次刷新的时候是把整个页面一起刷新的。一方面造成刷新页面特别慢，另一方面这种刷新把post的数据一起给刷新了/比如我需要提交的数据还没输入完，结果刷新时间到，全部给我刷没了，很是烦人。
2. 想一种可以不用每次都刷整个页面的方法
- 需求就是定时去刷新PLC读取到的显示数据，post的数据需要人为触发。
- 这里面就需要用到java script和jQuery
- 实现后的源代码如下：
// 需要用作定时刷新的数据，这里新建了一个叫做DataBase.html的文件专门来存放，这是个JSON格式，右边遵循西门子AWP读数据指令格式。
// 关于为什么不直接建立一个.json的文件？因为AWP读数据的写法包含不符合json字符格式规定的不合规字符，会报错。所以我只能用.html代替
{
"totalCnt": ":="totalCnt":",
"faultCntC": ":="faultCntC":",
"faultCnt": ":="faultCnt":",
"CurrData": ":="CurrData":"
}
// 需要被定时刷新的实现方法，这里新建了一个叫ReadData_script.js的文件：
//$表示用的是一个jQuery方法
// ajaxSetup({cache:false});表示不保存缓存，每次都实时刷新
//# 表示这是html的元素id,js根据元素id来找到元素显示位置
//getJSON是获取json格式方法
//setInterval是定时刷新方法
$(document).ready(function () {
$.ajaxSetup({
cache:false
});// make sure refresh data every time instead of cache data
//set interval as 1000ms, include function of fetch data from server
setInterval(function fetchdata(){
$.getJSON('DataBase.html', function (data) {
//required field
$('#totalCnt').text(data.totalCnt);
$('#faultCntC').text(data.faultCntC);
$('#faultCnt').text(data.faultCnt);
$('#CurrData').text(data.CurrData);
});
}, 1000)
});
// html主页面
<!-- AWP_In_Variable Name='"enable_cycle"' -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://wwww.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>CP341_COMM_CP1241_Func</title>
<script src="jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="ReadData_script.js">
</script>
</head>
<body>
<div>
<p><strong>数据读取</strong></p>
<p>总计数:<sapn id="totalCnt">0</span></p>
<p>总错误进位:<sapn id="faultCntC">0</sapn></p>
<p>总错误:<sapn id="faultCnt">0</sapn></p>
<p>当前循环过程数据:<sapn id="CurrData">0</sapn></p>
</div>
<p><strong>数据写入</strong></p>
<form action="" method="post">
<input name='"enable_cycle"' type="text" />
<input name="" type="submit" value="开始使能" />
</form>
</body>
</html>
- 如下图：
jquery-3.6.0.min.js是网上下载的jQuery文件，待会会详细讲到
- 下载进PLC（这里不讲PLC web server的使用方法，需要请去查找资料），显示效果如图：
3. 中途遇到的问题汇总
- 引入jQuery：
- 网上引入jQuery用到的方法
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>,这里的src是网上的在线数据,但我们的IPC大概率是离线或者是局域网；如果本地使用，请先复制链接把它下载到本地，最好和html同一目录下使用。
- 如果没有正确引入jQuery会发生什么事：
- 为了测试，我把html页面的
<script src="jquery-3.6.0.min.js"></script>删除了，再次下载进PLC，然后测试，页面本身没有问题，但是当点进控制台的时候，就看到了报错了：
$ is not define:ChatGPT告诉我通常意味着jQuery库文件没有正确加载。
- 所以重新把
jQuery库文件引用回来即可。
- 如果不想从网上下载jQuery库，也不想使用在线的jQuery资源怎么办？
- 随便找一个PLC的web页面，检查PLC的web页面，找到该页面用的jQuery文件，引用它的，白嫖PLC的jQuery资源.
标签：jQuery,
自定义,
html,
PLC,
刷新,
data,
页面
From： https://www.cnblogs.com/xiacuncun/p/18322698