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通过动态创建
原始的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变量声明中。这样，当浏览器通过
假设原始的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,'
// 这个正则表达式会匹配冒号后紧跟逗号 
