本文探讨了如何从西门子S7-1200 PLC的HTML页面中读取格式类似JSON的数据，同时解决跨域请求和非标准JSON语法导致的“unexpected token”错误。通过将PLC页面内容封装为JavaScript字符串，并在客户端进行正则转换与解析，实现了数据的有效获取与处理，为PLC数据与前端应用的集成提供了一种实用但需谨慎的解决方案。
1. 背景与问题描述
在工业自动化领域，西门子S7-1200系列PLC常用于控制系统。有时，我们需要从PLC内置的Web服务器获取实时数据，并将其集成到外部Web应用程序中。一个常见的场景是，PLC的Web页面（例如api.htm）被设计成返回类似JSON的数据结构，以便前端应用可以解析和使用。然而，这里存在几个挑战：
HTML格式与JSON内容的冲突：PLC为了方便自身操作变量，可能将数据以HTML文件的形式提供，即使其内容看起来像JSON。非标准JSON语法：PLC生成的“JSON-like”数据可能包含非标准的语法，例如在键值对之间使用::=而不是:，或者在值后面有多余的:，这会导致标准的JSON解析器报错。
{ "Muntje"::="Feedback-WS".Muntje:, "AdK"::="Feedback-WS".Aanraking_der_Kunst:, // ... 其他数据 ... "Morse_Code"::="Feedback-WS".Morse_Code:}
上述示例中，::=和值后面的,前的:都是非标准语法。
跨域请求限制（CORS）：当外部Web服务器尝试通过AJAX请求PLC的Web页面时，由于协议、域名或端口不同，浏览器会触发跨域安全策略，阻止请求。
为了绕过跨域问题，开发者通常会尝试使用JSONP（JSON with Padding）。JSONP通过动态创建标签来加载数据，绕过了同源策略。然而，当PLC返回的api.htm文件内容并非标准的JSONP格式（即不是一个函数调用包裹的JSON数据），而是包含非标准JSON语法的HTML时，浏览器在尝试将其作为JavaScript执行时，就会抛出Uncaught SyntaxError: unexpected token: ‘:’等错误。
原始的AJAX请求配置如下：
立即学习“前端免费学习笔记（深入）”；
var settings = { 'cache': false, 'dataType': "jsonp", // 尝试使用JSONP绕过跨域 "contentType": "application/json; charset=utf-8", "async": true, "crossDomain": true, "url": "http://192.168.22.160/awp/TIR/api.htm", "method": "GET", "headers": { "accept": "application/json", "Access-Control-Allow-Origin":"*" }};$.ajax(settings).done(function (response) { // console.log($.parseJSON(response)); // 在这里会遇到语法错误});
2. 解决方案：字符串封装与客户端解析
由于PLC的限制，我们可能无法直接修改其输出以生成标准的JSON或JSONP。一个实用的变通方案是：将PLC输出的“JSON-like”内容封装成一个JavaScript字符串变量，然后通过JSONP（或dataType: “script”）加载这个包含字符串的JavaScript文件，最后在客户端对这个字符串进行清理和解析。
2.1 修改PLC上的api.htm文件
核心思想是将PLC输出的非标准JSON内容包裹在一个JavaScript变量声明中。这样，当浏览器通过标签加载这个文件时，它会执行这段JavaScript代码，并将包含数据的字符串赋值给一个变量，而不会因为非标准JSON语法而报错。
假设原始的api.htm内容是：
{ "Muntje"::="Feedback-WS".Muntje:, "AdK"::="Feedback-WS".Aanraking_der_Kunst:, // ...}
修改后的api.htm内容应变为：
let rawDataFromPLC = `{ "Muntje"::="Feedback-WS".Muntje:, "AdK"::="Feedback-WS".Aanraking_der_Kunst:, "Juwelenkistje"::="Feedback-WS".Juwelenkistje:, "Duivelsbeeld"::="Feedback-WS".Duivelsbeeld:, "Klok"::="Feedback-WS".Klok:, "Hertenpoot"::="Feedback-WS".Hertenpoot:, "Zekering_Kledingkast"::="Feedback-WS".Zekering_Kledingkast:, "Bed_knop_1"::="Feedback-WS".Bed_knop_1:, "Bed_knop_2"::="Feedback-WS".Bed_knop_2:, "Bed_knop_3"::="Feedback-WS".Bed_knop_3:, "Bed_knop_4"::="Feedback-WS".Bed_knop_4:, "Vacuum_Pomp"::="Feedback-WS".Vacuum_Pomp:, "Signaal_Generator"::="Feedback-WS".Signaal_Generator:, "Stekkerrek"::="Feedback-WS".Stekkerrek:, "Zekering_1"::="Feedback-WS".Zekering_1:, "Zekering_2"::="Feedback-WS".Zekering_2:, "Zekering_3"::="Feedback-WS".Zekering_3:, "Hoofdschakelaar"::="Feedback-WS".Hoofdschakelaar:, "Morse_Code"::="Feedback-WS".Morse_Code:}`;
注意：这里使用了反引号 ` 来定义多行字符串，这在JavaScript中是合法的。如果PLC环境不支持，可以使用单引号或双引号，但需要手动处理换行和转义。
2.2 客户端AJAX请求与数据解析
在客户端，我们仍然可以使用dataType: “jsonp”来绕过跨域问题。当api.htm文件被加载为脚本时，它会执行let rawDataFromPLC = ‘…’语句，使得rawDataFromPLC变量在全局作用域（或特定作用域）中可用。然后，我们需要手动从这个变量中获取数据，并进行必要的字符串替换，使其成为有效的JSON，最后再进行解析。
// 在全局作用域声明一个变量来接收PLC数据// 或者确保PLC文件中的变量名与此处一致，且在AJAX请求前或同一作用域内可访问let rawDataFromPLC = ''; var settings = { 'cache': false, 'dataType': "jsonp", // 保持jsonp以绕过跨域，但要注意其行为 "contentType": "application/json; charset=utf-8", // 可能被jsonp忽略 "async": true, "crossDomain": true, "url": "http://192.168.22.160/awp/TIR/api.htm", "method": "GET", "headers": { "accept": "application/json", "Access-Control-Allow-Origin":"*" // 针对常规CORS请求，jsonp不依赖此 }};$.ajax(settings).done(function (response) { // 对于非标准JSONP响应（即PLC返回一个JS变量声明）， // response参数通常是undefined或空对象，因为没有调用预期的回调函数。 // 数据需要从全局变量rawDataFromPLC中获取。 if (rawDataFromPLC) { try { // 步骤1: 替换PLC特有的键值分隔符 '::=' 为标准的 ':' let validJsonString = rawDataFromPLC.replace(/::=/g, ':'); // 步骤2: 移除PLC特有的值后面的多余冒号，例如 'value:,' -> 'value,' // 这个正则表达式会匹配冒号后紧跟逗号
以上就是从西门子PLC的HTML页面读取JSON数据：处理跨域与语法错误的实用方法的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1526608.html
微信扫一扫 
支付宝扫一扫 
