从西门子PLC的HTML页面读取JSON数据：处理跨域与语法错误的实用方法-js教程-PHP中文网

从西门子PLC的HTML页面读取JSON数据：处理跨域与语法错误的实用方法

心靈之曲

发布： 2025-10-05 11:29:46

原创

546人浏览过

从西门子plc的html页面读取json数据：处理跨域与语法错误的实用方法

本文探讨了如何从西门子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通过动态创建<script>标签来加载数据，绕过了同源策略。然而，当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变量声明中。这样，当浏览器通过<script>标签加载这个文件时，它会执行这段JavaScript代码，并将包含数据的字符串赋值给一个变量，而不会因为非标准JSON语法而报错。

法语写作助手

法语助手旗下的AI智能写作平台，支持语法、拼写自动纠错，一键改写、润色你的法语作文。

查看详情

假设原始的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数据：处理跨域与语法错误的实用方法的详细内容，更多请关注php中文网其它相关文章！